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 #

disabled #

Type: boolean

If true, the user cannot interact with this element.

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.

step #

Type: number

The stepping interval of the slider.

value #

Type: number[]

The value of the slider.

Events #

change #

Type: RangeSliderChangeEvent

Fired when the user commits a value change.

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[] }>;