Slider

The Slider component allows you to select a numeric value between a range specified by minimum and maximum values.

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.

labelBreak (default: false)

This boolean value indicates if the Slider labels 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:

labelWidth

This property sets the width of the Slider.

maxValue (default: 10)

This property specifies the maximum value of the allowed input range.

minStepsBetweenThumbs

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 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

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

This property defines the increment value for the slider, determining the allowed intervals between selectable values.

thumbStyle

This 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

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.

setValue

You can use this method to set the component's current value programmatically (true: checked, false: unchecked).

value

You can query the component's value. If no value is set, it will retrieve undefined.

Styling

Theme Variables