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>

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 (applies to both thumbs)
thumb-start	The start (lower value) thumb
thumb-end	The end (upper value) 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
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
start-active	Set when the start thumb is activated with mouse or touch
end-active	Set when the end thumb is activated with mouse or touch
start-focused	Set when the start thumb has focus
end-focused	Set when the end thumb has focus
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.

accessibleNameEnd #

Type: string | null | undefined

Custom accessible name for the end (maximum) input. When not set, defaults to "${label} max" or "max" if no label.

accessibleNameRef #

Type: string | null | undefined

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

accessibleNameStart #

Type: string | null | undefined

Custom accessible name for the start (minimum) input. When not set, defaults to "${label} min" or "min" if no label.

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

Fired when the user commits a value change.

input #

Type: RangeSliderInputEvent

Fired when the slider value changes during user interaction.

invalid-changed #

Type: RangeSliderInvalidChangedEvent

Fired when the invalid property changes.

validated #

Type: RangeSliderValidatedEvent

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

RangeSliderInputEvent #

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

RangeSliderInvalidChangedEvent #

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

RangeSliderValidatedEvent #

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

RangeSliderValueChangedEvent #

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