Slider

Description #

<vaadin-slider> is a web component that represents a range slider for selecting numerical values within a defined range.

<vaadin-slider min="0" max="100" step="1"></vaadin-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: SliderChangeEvent

Fired when the user commits a value change.

value-changed #

Type: SliderValueChangedEvent

Fired when the value property changes.

Types #

SliderChangeEvent #

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

SliderValueChangedEvent #

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