Taiga UI 5 is out!

InputRange KIT

Examples API GitHub

[min]
the lowest value in the range of permitted values
number
[max]
the greatest value in the range of permitted values
number
[prefix]
uneditable text before number
null  |  readonly [string, string]
[postfix]
uneditable text after number
null  |  readonly [string, string]
[content]
a template for custom view of the selected value.
[PolymorpheusContent, PolymorpheusContent]
[quantum]
minimum indivisible value

Use 0 (default value) to disable this feature and allow any value (that satisfies min / max / precision constraints)

number
TuiRange
[segments]
a number of visual segments (use 1 for no ticks)
number
[step]
granularity of each discrete slider step and value of increase/decrease on keyboard arrows

For non-linear slider ( [keySteps] property is enabled) [step] means percentage of total track length.

number
[keySteps]
anchor points of non-uniform format between value and position
TuiKeySteps
TuiNumberFormat
[tuiNumberFormat]="{thousandSeparator, decimalSeparator, ..., rounding}"
[thousandSeparator]
symbol for separating thousands
string
[decimalSeparator]
symbol for separating fractions
string
[precision]
a number of digits after [decimalSeparator] ( Infinity for an untouched decimal part)
number
[decimalMode]
always
number of digits after [decimalSeparator] is always equal to the precision.
pad
pads trailing zeroes up to precision, if the number is fractional
not-zero
drops trailing zeroes
TuiDecimalMode
[rounding]
round
rounds to the nearest number with the specified [precision]
floor
rounds down (the largest number with the specified [precision] less than or equal to a given number)
ceil
rounds up (the smallest number with the specified [precision] greater than or equal to a given number)
truncate
returns the number with the specified [precision] by just removing extra fractional digits
TuiRounding
[negativePattern]
order of prefix and minus sign
'prefixFirst'  |  'minusFirst'
TextfieldOptionsApplied as a host directive
[tuiTextfieldSize]
size of the textfield.

Don't use label[tuiLabel] inside s - size textfield.
Use outside label or <input placeholder="..." /> instead.

TuiSizeS  |  TuiSizeL
ControlApplied as a host directive
[readOnly]
readonly state
boolean
[disabled]
disabled state (use formControl.disable()/.enable() for reactive forms)
boolean
[invalid]
manual invalid state
null  |  boolean
CSS customization
[style.--tui-thumb-size.px]
size of thumb
number