AngularJS Touch Slider

Simple slider

Model:

Range slider

Min Value:
Max Value:

Range slider with minimum range of 10

Range slider with noSwitching=true

Slider with visible selection bar

Slider with visible selection bar at the end

Slider with visible selection bar from a value

Slider with dynamic selection bar colors

Slider with dynamic pointer color

Slider with custom floor/ceil/step

Right to left 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 custom display function using html formatting

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