InputSlider KIT

Examples API Setup

See also

InputNumber, InputRange, Range, Slider

InputSlider = 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).

Rate your mind

20%40%60%80%

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.

Not linear growing slider

0101005001000

Control value: 10