AngularJS Touch Slider

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 minimum range of 10 and maximum of 50

Range slider with noSwitching=true

Range slider with minimum range of 10 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 colors

Slider with dynamic pointer color

Slider with custom floor/ceil/step

Slider with logarithmic scale

Slider with custom scale

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

Current letter: {{ slider_alphabet.value }}

Slider with ticks

Slider with ticks at specific positions

Slider with ticks and tooltips

Slider with ticks and values (and tooltips)

Range slider with ticks and values

Slider with ticks at intermediate positions

Slider with ticks and values at intermediate positions



Slider with ticks values and legend

Slider with dynamic tick color

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 angular directive inside custom template

Slider with all options demo