LongHanVisazure / angular-slidezilla

Angular Slidezilla is a pure angular slider directive which makes it incredibly simple to have reliable ui form sliders in angular.

Angular 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