Taiga UI 5.0 is out!
See what's new
Slider CORE
On this page
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
Size
Use css-variable
--tui-thumb-size to customize radius of the thumb and track thickness. Custom
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
Key steps – anchor points of non-uniform format between control's value and slider's position.
When [keySteps] property is enabled, [step] means percentage of total track length.
5 000100 000300 0001 000 000
Control value: 720,000
Complex
Use
tuiSliderThumbLabel for positioning any content so it slides alongside the thumb. Vertical
Vertical orientation can be achieved using CSS transformations.
Taiga UI