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:

Range slider with a minimal range set to 10

Slider with visible selection bar

Slider with dynamic selection bar colors

Slider with custom floor/ceil/step

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 Alphabet

Slider with ticks

Slider with ticks and tooltips

Slider with ticks and values (and tooltips)

Range slider with ticks and 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