InputRange LEGACY

Description and examples API Setup

See also

InputNumber, InputSlider, Range, Slider

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

Desired departure day

In a week

Visual segments + labels for ticks

Use mixin tui-slider-ticks-labels to arrange ticks' labels (it places them strictly below ticks).

Select volume range

20%40%60%80%

KeySteps

Key steps: anchor points of non-uniform format between value and position

Not linear growing sliders

010K100K500k1000K

Control value: [ 100000, 500000 ]

Using negative values without minus sign

How far back to look

Today

Control value:

[
  -30,
  0
]