AngularJS Slider
AngularJS slider directive with no external dependencies
Slider directive implementation for AngularJS, without any dependencies
- Mobile friendly
- Fast
- Well documented
- Customizable
- Simple to use
- Keyboard support
- Compatibility with jQuery Lite, ie. without full jQuery
Simple slider
Model:
Range slider
Min Value:
Max Value:
Slider with custom style
Range slider with min limit set to 10 and max limit set to 90
Range slider with a minimal range set to 10 and maximum of 50
Range slider with restricted area from 30 to 70
Range slider with noSwitching=true
Range slider with minimum range of 10, maximum of 30 and pushRange option
Slider with visible selection bar
Slider with visible selection bar at the end
Slider with visible selection bar from a value
Slider with selection bar gradient
Slider with dynamic selection bar color
Slider with dynamic pointer color
Slider with custom floor/ceil/step
Right to left slider
Slider with floating values
Slider with callbacks on start, change and end
Value linked on start: {{ otherData.start }}
Value linked on change: {{ otherData.change }}
Value linked on end: {{ otherData.end }}
Slider with custom display function
Slider with custom display function using HTML formatting
Slider with Alphabet
Current letter: {{ slider_alphabet.value }}
Slider with ticks
Slider with ticks at intermediate positions
Slider with ticks at specific positions
Slider with ticks values and legend
Slider with ticks and tooltips
Slider with ticks and values (and tooltips)
Range slider with ticks and values
Range slider with ticks and values at intermediate positions
Slider with dynamic tick color
Slider with custom template to use HTML formatting for ticks
* You need to include ngSanitize (angular-sanitize.js) in order to use
ng-bind-html
Slider with logarithmic scale
Slider with custom scale
Slider with angular directive inside custom template
Slider with Date values
Slider with draggable range
Slider with draggable range only
Vertical sliders
Disabled slider
Read-only slider
Toggle slider example
Sliders inside a modal
Normal slider value: {{percentages.normal.low}}%
Range slider values: {{percentages.range.low}}% and {{percentages.range.high}}%
Sliders inside tabs
Price 1: {{tabSliders.slider1.value}}
Price 2: {{tabSliders.slider2.value}}
Slider with all options demo