Angular Multiple Slider Directive

Pure Angular slider control with no JQuery Dependencies. This demo utilizes UI Bootstrap version 0.14.3 which also requires ngAnimate. These are not required for the angular-multi-slider, just for this demo.

Developer Page - Demo Site

Single Slider - Hover / Grab Bubble

          {{ slider | json}}
        

Adding Sliders After Creation

          {{ addSlider | json}}
        

Multiple Sliders with defined Colors in a Form - Persistent Bubbles - Hidden

          {{ sliders | json}}
        

Form Dirty: {{ sliderForm.$dirty }}
Form Pristine: {{ sliderForm.$pristine }}
Slider Dirty: {{ sliderForm.mySlider.$dirty }}
Slider Pristine: {{ sliderForm.mySlider.$pristine }}
Slider Hidden: {{ hideSliders }}

*Slider Enabled / Hidden NOT Fully Working ->


Multi-Slider in multiple UI Bootstrap Tabs

Tab 1 Content for angular multiple sliders

Tab 2 Content for angular multiple sliders


Sliders in a UI Bootstrap modal

Adjusting Floor / Ceiling end points of Slider after rendered (Maintain slider Order)

          {{ tabSliders | json}}
        

Date Filter Values and End Points of Multiple Slider

          {{ dateSliders | json}}