---
title: RangeSlider
description: RangeSlider
element: vaadin-range-slider
---

## Description

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

```html
<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](https://vaadin.com/docs/latest/styling/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](#rangesliderchangeevent)

Fired when the user commits a value change.

### input

**Type:** [RangeSliderInputEvent](#rangesliderinputevent)

Fired when the slider value changes during user interaction.

### invalid-changed

**Type:** [RangeSliderInvalidChangedEvent](#rangesliderinvalidchangedevent)

Fired when the `invalid` property changes.

### validated

**Type:** [RangeSliderValidatedEvent](#rangeslidervalidatedevent)

Fired whenever the field is validated.

### value-changed

**Type:** [RangeSliderValueChangedEvent](#rangeslidervaluechangedevent)

Fired when the `value` property changes.

## Types

### RangeSliderChangeEvent

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

### RangeSliderInputEvent

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

### RangeSliderInvalidChangedEvent

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

### RangeSliderValidatedEvent

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

### RangeSliderValueChangedEvent

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