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>

Styling #

The following shadow DOM parts are available for styling:

Part name	Description
label	The label element
required-indicator	The required indicator element
helper-text	The helper text element
error-message	The error message element
track	The slider track
track-fill	The filled portion of the track
thumb	The slider thumb
marks	Container for min/max labels
min	Minimum value label
max	Maximum value label

The following state attributes are available for styling:

Attribute	Description
active	Set when the slider is activated with mouse or touch
disabled	Set when the slider is disabled
readonly	Set when the slider is read-only
focused	Set when the slider has focus
focus-ring	Set when the slider is focused using the keyboard
min-max-visible	Set when the min/max labels are displayed

The following custom CSS properties are available for styling:

Custom CSS property
--vaadin-field-default-width
--vaadin-input-field-error-color
--vaadin-input-field-error-font-size
--vaadin-input-field-error-font-weight
--vaadin-input-field-helper-color
--vaadin-input-field-helper-font-size
--vaadin-input-field-helper-font-weight
--vaadin-input-field-label-color
--vaadin-input-field-label-font-size
--vaadin-input-field-label-font-weight
--vaadin-input-field-required-indicator
--vaadin-slider-bubble-arrow-size
--vaadin-slider-bubble-background
--vaadin-slider-bubble-border-color
--vaadin-slider-bubble-border-radius
--vaadin-slider-bubble-border-width
--vaadin-slider-bubble-offset
--vaadin-slider-bubble-padding
--vaadin-slider-bubble-shadow
--vaadin-slider-bubble-text-color
--vaadin-slider-bubble-font-size
--vaadin-slider-bubble-font-weight
--vaadin-slider-bubble-line-height
--vaadin-slider-fill-background
--vaadin-slider-fill-border-color
--vaadin-slider-fill-border-width
--vaadin-slider-marks-color
--vaadin-slider-marks-font-size
--vaadin-slider-marks-font-weight
--vaadin-slider-thumb-border-color
--vaadin-slider-thumb-border-radius
--vaadin-slider-thumb-border-width
--vaadin-slider-thumb-cursor
--vaadin-slider-thumb-cursor-active
--vaadin-slider-thumb-height
--vaadin-slider-thumb-width
--vaadin-slider-track-background
--vaadin-slider-track-border-color
--vaadin-slider-track-border-radius
--vaadin-slider-track-border-width
--vaadin-slider-track-height

In order to style the slider bubble, use <vaadin-slider-bubble> shadow DOM parts:

Part name	Description
overlay	The overlay container
content	The overlay content
arrow	Arrow pointing to the thumb

See Styling Components documentation.

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.

minMaxVisible #

Type: boolean

When true, displays the min and max values below the slider track.

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.

valueAlwaysVisible #

Type: boolean

When true, the value bubble is always visible, regardless of focus or hover state.

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

Fired when the user commits a value change.

input #

Type: SliderInputEvent

Fired when the slider value changes during user interaction.

invalid-changed #

Type: SliderInvalidChangedEvent

Fired when the invalid property changes.

validated #

Type: SliderValidatedEvent

Fired whenever the field is validated.

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

SliderInputEvent #

/**
 * Fired when the slider value changes during user interaction.
 */
export type SliderInputEvent = Event & {
  target: Slider;
};

SliderInvalidChangedEvent #

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

SliderValidatedEvent #

/**
 * Fired whenever the slider is validated.
 */
export type SliderValidatedEvent = CustomEvent<{ valid: boolean }>;

SliderValueChangedEvent #

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