JarCastingAngular Slidezilla
Angular Slidezilla is a pure angular slider directive which makes it incredibly simple to have reliable sliders in angular.
Talk is cheap: See THE DEMO here.
##Why Slidezilla?
There are several other angular slider directives. Most of them depend on jQuery and/or are really glitchy or don't have the features I wanted. So I created my own and I needed a unique name for the plugin and this was the first thing that popped in my head.
##Installation
Dependencies: Angular
Download and include angular-slidezilla.js and pretty-slidezilla.css
Create an angular app and inject angular-slidezilla. That's about it.
bower
bower install angular-slidezilla
##Usage
basic
<slider ng-model="slider1.val"></slider>
controller:
//set slider value as a number to have 1 slider
//all properties default values
$scope.slider1 = {val:5};
static
<slider ng-model="slider2.val" min="-25" max="25" step="1"></slider>
controller:
//set slider value as a number to have 1 slider
// properties defined in html
$scope.slider2 = {val:-7};
dynamic
<slider ng-model="slider3.val" min="slider3.min" max="slider3.max" step="slider3.step"></slider>
controller:
//set slider value as a number to have 1 slider
// properties defined below
$scope.slider3 = {
val:5.5,
min: 0,
max: 10,
step: 0.5
};
range
<slider ng-model="slider4.val"></slider>
controller:
//set value as an array to have 2 sliders
$scope.slider4 = { val:[5,20] };
##Configuration
| Name | Values | Description | Default |
| min | variable or number (float) | Min value of slider. | 0 |
| max | variable or number (float) | Max value of slider | 100 |
| step | variable or number (float) | Step value of slider. Slider will increment by this value. | 5 |
##Customization
Simply modify angular-slidezilla.css