English
latest (v4.7.0)

InputSlider LEGACY

Description and examples API Setup Source code
-
Name and descriptionType Value
disabled
Disabled state (use formControl.disable() )
boolean
[min]
Min value
number
0
[max]
Max value
number
10
[quantum]
Minimum indivisible value
number
1
[steps]
Number of actual discrete slider steps

If property is not set (i.e. equals to default value 0 ), number of steps equals (max - min) / quantum

number
[segments]
A number of visual segments (use 1 for no ticks)
number
[keySteps]
Key steps to bind slider position and value
TuiKeySteps
[valueContent]
A template for custom view of selected value.
PolymorpheusContent
''
Can be expanded with TuiNumberFormat

Usage example: [tuiNumberFormat]='{decimalMode, precision, rounding, zeroPadding, thousandSeparator, decimalSeparator}'

Requires you to import TuiNumberFormat .

Name and descriptionType Value
[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
'pad'
[rounding]
Rounding
TuiRounding
'truncate'
[thousandSeparator]
Symbol for separating thousands
string
[decimalSeparator]
Symbol for separating fraction
string
Can be expanded with TuiHint

Requires you to import TuiHint

Name and descriptionType Value
[tuiHintContent]
Content of a hint
PolymorpheusContent
''
[tuiHintDirection]
Hint direction
TuiHintDirection
'bottom-left'
[tuiHintAppearance]
Hint mode
string
''
Can be expanded with TuiTextfieldController

Requires you to import TuiTextfieldControllerModule

Name and descriptionType Value
[tuiTextfieldCleaner]
Shows a cross to reset a value
boolean
[tuiTextfieldCustomContent]
Right content (e.g. avatar with maximum size 32x32px)
PolymorpheusContent
''
[tuiTextfieldLabelOutside]
Label is outside a component and made with Label

( labelOutside = false does not work together with size === 's' : for s-size inputs use only outside labels)

boolean
[tuiTextfieldSize]
Size
TuiSizeS  |  TuiSizeL
'l'
[tuiTextfieldIconLeft]
A left icon. It can be stringified svg.
string
''
[tuiTextfieldFiller]
Pale text suggestion for input (e.g. HH:MM:SS for time)
string
[tuiTextfieldPrefix]
Uneditable text before value
string
''
[tuiTextfieldPostfix]
Uneditable text after value
string
''
Inherited from TuiReactiveControl
Name and descriptionType Value
[readOnly]
Component is read only
boolean
[pseudoInvalid]
Set invalid state regardless of control
null  |  boolean
Inherited from TuiInteractive
Name and descriptionType Value
[focusable]
Element can be focused
boolean
[nativeId]
Native ID attribute for element. It helps users with Screen Readers to use a page
string
[pseudoHover]
Visual hovered state
null  |  boolean
[pseudoFocus]
Visual focused state
null  |  boolean
[pseudoActive]
Visual pressed state
null  |  boolean
(focusedChange)
Emits on focus and blur
boolean Emit!