Slider
Slider provides an interactive control for selecting numeric values within a defined range, supporting both single value selection and range selection with multiple thumbs. It offers precise control through customizable steps and visual feedback with formatted value display.Key features:
- Range selection: Single value or dual-thumb range selection with configurable minimum separation
- Step control: Precise incremental selection with customizable step values
- Value formatting: Custom display formatting for current values and visual feedback
Properties
autoFocus (default: false)
If this property is set to
true, the component gets the focus automatically when displayed.enabled (default: true)
This boolean property value indicates whether the component responds to user events (
true) or not (false).initialValue
This property sets the component's initial value.
label
This property sets the label of the component. If not set, the component will not display a label.
labelBreak (default: true)
This boolean value indicates whether the
Slider label can be split into multiple lines if it would overflow the available label width.labelPosition (default: "top")
Places the label at the given position of the component.
Available values:
| Value | Description |
|---|---|
start | The left side of the input (left-to-right) or the right side of the input (right-to-left) |
end | The right side of the input (left-to-right) or the left side of the input (right-to-left) |
top | The top of the input (default) |
bottom | The bottom of the input |
labelWidth
This property sets the width of the
Slider component's label. If not defined, the label's width will be determined by its content and the available space.maxValue (default: 10)
This property specifies the maximum value of the allowed input range.
minStepsBetweenThumbs (default: 1)
This property sets the minimum number of steps required between multiple thumbs on the slider, ensuring they maintain a specified distance.
minValue (default: 0)
This property specifies the minimum value of the allowed input range.
rangeStyle
This optional property allows you to apply custom styles to the range element of the slider.
readOnly (default: false)
Set this property to
true to disallow changing the component value.required (default: false)
Set this property to
true to indicate it must have a value before submitting the containing form.showValues (default: true)
This property controls whether the slider shows the current values of the thumbs.
step (default: 1)
This property defines the increment value for the slider, determining the allowed intervals between selectable values.
thumbStyle
This optional property allows you to apply custom styles to the thumb elements of the slider.
validationStatus (default: "none")
This property allows you to set the validation status of the input component.
Available values:
| Value | Description |
|---|---|
valid | Visual indicator for an input that is accepted |
warning | Visual indicator for an input that produced a warning |
error | Visual indicator for an input that produced an error |
valueFormat (default: "(value) => value.toString()")
This property allows you to customize how the values are displayed.
Events
didChange
This event is triggered when value of Slider has changed.
gotFocus
This event is triggered when the Slider has received the focus.
lostFocus
This event is triggered when the Slider has lost the focus.
Exposed Methods
focus
This method sets the focus on the slider component.
Signature:
focus(): voidsetValue
This API sets the value of the
Slider. You can use it to programmatically change the value.Signature:
setValue(value: number | [number, number] | undefined): voidvalue: The new value to set. Can be a single value or an array of values for range sliders.
value
This API retrieves the current value of the
Slider. You can use it to get the value programmatically.Signature:
get value(): number | [number, number] | undefinedStyling
Theme Variables
| Variable | Default Value (Light) | Default Value (Dark) |
|---|---|---|
| backgroundColor-range-Slider | $color-primary | $color-primary |
| backgroundColor-range-Slider | $color-primary | $color-primary |
| backgroundColor-range-Slider--disabled | $color-surface-400 | $color-surface-800 |
| backgroundColor-range-Slider--disabled | $color-surface-400 | $color-surface-800 |
| backgroundColor-thumb-Slider | $color-primary-500 | $color-primary-400 |
| backgroundColor-thumb-Slider | $color-primary-500 | $color-primary-400 |
| backgroundColor-track-Slider | $color-surface-200 | $color-surface-200 |
| backgroundColor-track-Slider | $color-surface-200 | $color-surface-200 |
| backgroundColor-track-Slider--disabled | $color-surface-300 | $color-surface-600 |
| backgroundColor-track-Slider--disabled | $color-surface-300 | $color-surface-600 |
| borderColor-Slider-default | transparent | transparent |
| borderColor-Slider-default | transparent | transparent |
| borderColor-Slider-default--focus | none | none |
| borderColor-Slider-default--hover | none | none |
| borderColor-Slider-error | none | none |
| borderColor-Slider-error--focus | none | none |
| borderColor-Slider-error--hover | none | none |
| borderColor-Slider-success | none | none |
| borderColor-Slider-success--focus | none | none |
| borderColor-Slider-success--hover | none | none |
| borderColor-Slider-warning | none | none |
| borderColor-Slider-warning--focus | none | none |
| borderColor-Slider-warning--hover | none | none |
| borderColor-thumb-Slider | $color-surface-50 | $color-surface-950 |
| borderColor-thumb-Slider | $color-surface-50 | $color-surface-950 |
| borderRadius-Slider-default | $borderRadius | $borderRadius |
| borderRadius-Slider-default | $borderRadius | $borderRadius |
| borderRadius-Slider-error | none | none |
| borderRadius-Slider-success | none | none |
| borderRadius-Slider-warning | none | none |
| borderStyle-Slider-default | solid | solid |
| borderStyle-Slider-default | solid | solid |
| borderStyle-Slider-error | none | none |
| borderStyle-Slider-success | none | none |
| borderStyle-Slider-warning | none | none |
| borderStyle-thumb-Slider | solid | solid |
| borderStyle-thumb-Slider | solid | solid |
| borderWidth-Slider-default | 0 | 0 |
| borderWidth-Slider-default | 0 | 0 |
| borderWidth-Slider-error | none | none |
| borderWidth-Slider-success | none | none |
| borderWidth-Slider-warning | none | none |
| borderWidth-thumb-Slider | 2px | 2px |
| borderWidth-thumb-Slider | 2px | 2px |
| boxShadow-Slider-default | none | none |
| boxShadow-Slider-default | none | none |
| boxShadow-Slider-default--focus | none | none |
| boxShadow-Slider-default--hover | none | none |
| boxShadow-Slider-error | none | none |
| boxShadow-Slider-error--focus | none | none |
| boxShadow-Slider-error--hover | none | none |
| boxShadow-Slider-success | none | none |
| boxShadow-Slider-success--focus | none | none |
| boxShadow-Slider-success--hover | none | none |
| boxShadow-Slider-warning | none | none |
| boxShadow-Slider-warning--focus | none | none |
| boxShadow-Slider-warning--hover | none | none |
| boxShadow-thumb-Slider | $boxShadow-md | $boxShadow-md |
| boxShadow-thumb-Slider | $boxShadow-md | $boxShadow-md |
| boxShadow-thumb-Slider--focus | $boxShadow-xl | $boxShadow-xl |
| boxShadow-thumb-Slider--hover | $boxShadow-lg | $boxShadow-lg |