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.Hover over the component to see the tooltip with the current value. On mobile, tap the thumb to see the tooltip.

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

Behaviors

This component supports the following behaviors:

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.

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:

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.

Signature: didChange(newValue: any): void

• newValue: The new value of the component.

gotFocus

This event is triggered when the Slider has received the focus.

Signature: gotFocus(): void

lostFocus

This event is triggered when the Slider has lost the focus.

Signature: lostFocus(): void

Exposed Methods

focus

This method sets the focus on the slider component.

Signature: focus(): void

setValue

This API sets the value of the Slider. You can use it to programmatically change the value.

Signature: setValue(value: number | [number, number] | undefined): void

• value: 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] | undefined

Parts

The component has some parts that can be styled through layout properties and theme variables separately:

• label: The label displayed for the slider.
• thumb: The thumb elements of the slider.
• track: The track element of the slider.

Styling

Theme Variables