RangeSlider

Description #

<vaadin-range-slider> is a web component that represents a range slider for selecting a subset of the given range.

<vaadin-range-slider min="0" max="100" step="1"></vaadin-range-slider>

Properties #

accessibleName #

Type: string | null | undefined

String used to label the component to screen reader users.

accessibleNameRef #

Type: string | null | undefined

Id of the element used as label of the component to screen reader users.

disabled #

Type: boolean

If true, the user cannot interact with this element.

errorMessage #

Type: string | null | undefined

Error to show when the field is invalid.

helperText #

Type: string | null | undefined

String used for the helper text.

invalid #

Type: boolean

Set to true when the field is invalid.

label #

Type: string | null | undefined

The label text for the input node. When no light dom defined via [slot=label], this value will be used.

manualValidation #

Type: boolean

Set to true to enable manual validation mode. This mode disables automatic constraint validation, allowing you to control the validation process yourself. You can still trigger constraint validation manually with the validate() method or use checkValidity() to assess the component's validity without affecting the invalid state. In manual validation mode, you can also manipulate the invalid property directly through your application logic without conflicts with the component's internal validation.

max #

Type: number

The maximum allowed value.

min #

Type: number

The minimum allowed value.

readonly #

Type: boolean

When true, the user cannot modify the value of the slider. The difference between disabled and readonly is that the read-only slider remains focusable and is announced by screen readers.

required #

Type: boolean

Specifies that the user must fill in a value.

step #

Type: number

The stepping interval of the slider.

value #

Type: number[]

The value of the slider.

Methods #

checkValidity #

Type: () => boolean

Returns true if the field value satisfies all constraints (if any).

validate #

Type: () => boolean

Validates the field and sets the invalid property based on the result.

The method fires a validated event with the result of the validation.

Events #

change #

Type: RangeSliderChangeEvent

Fired when the user commits a value change.

invalid-changed #

Type: CustomEvent

Fired when the invalid property changes.

validated #

Type: CustomEvent

Fired whenever the field is validated.

value-changed #

Type: RangeSliderValueChangedEvent

Fired when the value property changes.

Types #

RangeSliderChangeEvent #

/**
 * Fired when the user commits a value change.
 */
export type RangeSliderChangeEvent = Event & {
  target: RangeSlider;
};

RangeSliderValueChangedEvent #

/**
 * Fired when the `value` property changes.
 */
export type RangeSliderValueChangedEvent = CustomEvent<{ value: number[] }>;