Slider KIT

Examples API Setup
See also
InputNumber, InputSlider, InputRange, Range
Taiga UI styling of native html tag <input type='range' /> to choose a value from a limited range

Read more about this input type in MDN Docs

Sizes

#

Built-in size options and custom thickness

Custom thickness

Colors

#

Customizing colors of the filled track and thumb

Segments

#

Use mixin tui-slider-ticks-labels to place labels strictly below ticks

Control value: 250

Disabled

#

Non interactive state

KeySteps

#

Using progressive scale across the track

5 000100 000300 0001 000 000

Control value: 720,000

Complex

#

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