rg-slider

AngularJS simple range slider directive WITHOUT jQuery dependency

Download

Main features

- You don't need attach jQuery to your project

- You can easly manipulate with style by adding your own classes

- Small as it can ~ 5kb (JS) , ~ 1kb (CSS)

- Works on ie 9+ , didn't implemented with input type range which are not supported by ie 9

Example with step

Slider value {{sliderValue}}

Code

        <rg-slider
            tracker-class="my-tracker rg-tracker-with-animation"
            navigator-class="my-navigator"
            bound-var="sliderValue"
            show-navigator="true"
            step="10">
        </rg-slider>

Example with step and pre-defined slider value

Slider value {{sliderValue}}

Code

        <rg-slider
            tracker-class="my-tracker rg-tracker-with-animation"
            navigator-class="my-navigator"
            bound-var="sliderValue"
            show-navigator="true"
            step="10">
        </rg-slider>

Example with navigator from 4 to 16

Slider value {{sliderValue}}

Code

        <rg-slider
            tracker-class="my-tracker rg-tracker-with-animation"
            navigator-class="my-navigator"
            bound-var="sliderValue"
            show-navigator="true"
            navigator-from="4"
            navigator-to="16">
        </rg-slider>

Example without navigator and step

Slider value {{sliderValue}}

Code

        <rg-slider
            tracker-class="my-tracker rg-tracker-with-animation"
            navigator-class="my-navigator"
            bound-var="sliderValue">
        </rg-slider>

Example without navigator but with steps

Slider value {{sliderValue}}

Code

        <rg-slider
            tracker-class="my-tracker rg-tracker-with-animation"
            navigator-class="my-navigator"
            bound-var="sliderValue"
            step="15">
        </rg-slider>