A mobile friendly, super-fast, range slider. No jQuery necessary...
bower install angular-ranger
install-package AngularJs.Ranger
<link rel="stylesheet" href="js/angular-ranger.css">
<script type="text/javascript" src="js/angular-ranger.js"></script>- Install
angular-rangerusing one of the methods above. - Add
angular-rangeras a module dependency to your app - Drop a ranger into your html
angular.module('app', ['angular-ranger'])
.run(function($rootScope){
$rootScope.value = {
min: 5,
max: 18,
value: 12
};
});<!-- Range selection -->
<angular-ranger min="0" max="20" step="1" min-value="value.min" max-value="value.max"></angular-ranger>
<!-- Single value selection -->
<angular-ranger min="0" max="20" step="1" value="value.value"></angular-ranger>- Angular-Ranger uses Sass to make the design highly customizable. Check the sass file for all of the available options.
- Angular-Ranger includes a simple gulpfile so that you can make your own adjustments and build/re-minify using
gulp build. Keep in mind you will need to install the dev dependencies first usingnpm install. - This has been tested on Windows, Windows Phone, and iOS. Let me know if you run into any bugs.
- Pull requests are always welcome