InputRangeLegacy deprecated LEGACY

Examples API Setup
Source code
This version of the component is deprecated and will be removed in the next major version. Use new version of InputRange instead!

Component to input a range of values

Number formatting can be customized by using tuiNumberFormat directive

Basic

#

Look into this example to understand difference between input-props [steps] and [quantum] .

Slider's step changes value by 1 .

But text inputs allow to type decimal number which is multiple of 0.00001 .

Override number format

#

Number formatting can be customized by using TUI_NUMBER_FORMAT .

Custom value content

#
Today
In a week

Visual segments + labels for ticks

#
Use mixin tui-slider-ticks-labels to arrange ticks' labels (it places them strictly below ticks).
20%40%60%80%

KeySteps

#
Key steps
anchor points of non-uniform format between value and position
010K100K500k1000K

Control value: [ 100000, 500000 ]

Using negative values without minus sign

#
Today
Control value: [ -30, 0 ]