InputSlider KIT

Dark modeBackground

InputNumber
`[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	`string`
`[postfix]` uneditable text after number	`string`
`[quantum]` minimum indivisible value Use `0` (default value) to disable this feature and allow any value (that satisfies `min` / `max` / `precision` constraints)	`number`
TuiSlider
`[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`
`[segments]` a number of visual segments or an array, in which every number - is ratio of slider's track length in range (0; 1) where to put tick (use `1` for no ticks)	`number \| number[]`
`[keySteps]` anchor points of non-uniform format between value and position	`TuiKeySteps \| null`
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`
`[content]` a template for custom view of textfield value. We strongly recommend to unset this property on focus – otherwise, it breaks UX on attempt to edit field by keyboard!	`PolymorpheusContent`
IconsApplied as a host directive
`[iconStart]` icon on the inline start side	`string`
`[iconEnd]` icon on the inline end side	`string`
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`

Taiga UI

GitHub StackBlitz