AngularJS Slider

Fork me on GitHub

AngularJS slider directive with no external dependencies

Slider directive implementation for AngularJS, without any dependencies


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