Slider KIT

Examples API Setup
Source code
See also
InputNumber, InputSlider, InputRange, Range
tuiSlider
attribute component for native html tag <input type='range' /> to choose a value from a limited range.

Read more about current input's type in MDN Docs .

Usage:<input tuiSlider type='range' min='0' max='100' step='1' /> .

Sizes

#

Colors

#

With visual segments

#

Use mixin tui-slider-ticks-labels to arrange ticks' labels (it places them strictly below ticks).

The mixin accepts only a single argument – size of the slider ( m or s ).

Control value: 250

Disabled

#

With key steps

#
Key steps
anchor points of non-uniform format between value and position
5 000100 000300 0001 000 000

Control value: 720,000

Complex

#

Use tuiSliderThumbLabel for positioning any content so it slides alongside the thumb.