InputSlider KIT
See also
InputNumber, InputRange, Range, SliderInputSlider = Textfield + InputNumber + Slider + ❤️ Textfield customization
# Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore Textfield 's documentation page for more customization options.
InputNumber customization
#InputSlider is just a slight extension of InputNumber – it has completely the same customization: add [prefix] / [postfix] , configure separators specific for your locale via NumberFormat directive or etc.
Slider customization
#Slider automatically inherits [min] / [max] properties from [tuiInputSlider] (don't set them for Slider to avoid any possible conflicts!). However, feel free to configure Slider 's-specific properties: [step] , [keySteps] and [segments] .
Also, you can use mixin-helper tui-slider-ticks-labels to arrange ticks' labels (it places them strictly below ticks).
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.
Control value: 10
Quantum
# Property [quantum] allows to set minimum indivisible value. Form control value never contains a number that is not divisible by value of this property. Even if user enters any invalid number, it will be rounded to the nearest valid one on blur event.
In this example, form control value can only contain 0 , 0.05 , 0.1 , 0.15 ... 0.9 , 0.95 , 1 .
Control value:
0.5
Taiga UI