Slider

Slider lets users pick a numeric value within a range by dragging a thumb along a track.

Range Slider
Min & Max Labels
Persistent Value Display
Step
Basic Features
Read-Only & Disabled
Accessible Thumb Names
Validation
Best Practices
Related Components

Slider is an input field that lets users pick a numeric value within a range by dragging a thumb along a track. Use arrow keys for precise adjustments.

Note

Preview Feature

This is a preview version of Slider and Range Slider. You need to enable it with the feature flag com.vaadin.experimental.sliderComponent. Preview versions may lack some planned features, and breaking changes may be introduced in any Vaadin version. We encourage you to try it out and provide feedback to help us improve it.

Open in a
new tab

Source code

SliderBasic.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.Slider;
import com.vaadin.flow.router.Route;

@Route("slider-basic")
public class SliderBasic extends Div {

    public SliderBasic() {
        // tag::snippet[]
        Slider slider = new Slider("Volume");
        slider.setValue(50.0);
        add(slider);
        // end::snippet[]
    }

}
slider-basic.tsximport React from 'react';
import { Slider } from '@vaadin/react-components/Slider.js';

function Example() {
  return (
    // tag::snippet[]
    <Slider label="Volume" value={50} />
    // end::snippet[]
  );
}

slider-basic.tsimport '@vaadin/slider';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('slider-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-slider label="Volume" value="50"></vaadin-slider>
      <!-- end::snippet[] -->
    `;
  }
}

Range Slider

Range Slider is a two-thumb variant of Slider for selecting a numeric range. It supports the same features as Slider, but its value is a pair of numbers representing the start and end of the selected range.

Open in a
new tab

Source code

RangeSliderBasic.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.RangeSlider;
import com.vaadin.flow.component.slider.RangeSliderValue;
import com.vaadin.flow.router.Route;

@Route("range-slider-basic")
public class RangeSliderBasic extends Div {

    public RangeSliderBasic() {
        // tag::snippet[]
        RangeSlider rangeSlider = new RangeSlider("Price range", 0, 1000);
        rangeSlider.setValue(new RangeSliderValue(200, 800));
        add(rangeSlider);
        // end::snippet[]
    }

}
range-slider-basic.tsximport React from 'react';
import { RangeSlider } from '@vaadin/react-components/RangeSlider.js';

function Example() {
  return (
    // tag::snippet[]
    <RangeSlider label="Price range" min={0} max={1000} value={[200, 800]} />
    // end::snippet[]
  );
}

range-slider-basic.tsimport '@vaadin/slider/vaadin-range-slider.js';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('range-slider-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-range-slider
        label="Price range"
        min="0"
        max="1000"
        .value="${[200, 800]}"
      ></vaadin-range-slider>
      <!-- end::snippet[] -->
    `;
  }
}

Min & Max Labels

The minimum and maximum values can be displayed below the slider track to give users a sense of the available range.

Open in a
new tab

Source code

SliderMinMaxVisible.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.Slider;
import com.vaadin.flow.router.Route;

@Route("slider-min-max-visible")
public class SliderMinMaxVisible extends Div {

    public SliderMinMaxVisible() {
        // tag::snippet[]
        Slider slider = new Slider("Temperature", 0, 100);
        slider.setValue(50.0);
        slider.setMinMaxVisible(true);
        add(slider);
        // end::snippet[]
    }

}
slider-min-max-visible.tsximport React from 'react';
import { Slider } from '@vaadin/react-components/Slider.js';

function Example() {
  return (
    // tag::snippet[]
    <Slider label="Temperature" min={0} max={100} value={50} minMaxVisible />
    // end::snippet[]
  );
}

slider-min-max-visible.tsimport '@vaadin/slider';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('slider-min-max-visible')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-slider
        label="Temperature"
        min="0"
        max="100"
        value="50"
        min-max-visible
      ></vaadin-slider>
      <!-- end::snippet[] -->
    `;
  }
}

Persistent Value Display

By default, the value bubble appears only when the user interacts with the slider. It’s possible to configure the slider to keep the value bubble visible at all times.

Open in a
new tab

Source code

SliderValueAlwaysVisible.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.Slider;
import com.vaadin.flow.router.Route;

@Route("slider-value-always-visible")
public class SliderValueAlwaysVisible extends Div {

    public SliderValueAlwaysVisible() {
        // tag::snippet[]
        Slider slider = new Slider("Brightness", 0, 100);
        slider.setValue(75.0);
        slider.setValueAlwaysVisible(true);
        add(slider);
        // end::snippet[]
    }

}
slider-value-always-visible.tsximport React from 'react';
import { Slider } from '@vaadin/react-components/Slider.js';

function Example() {
  return (
    // tag::snippet[]
    <Slider label="Brightness" min={0} max={100} value={75} valueAlwaysVisible />
    // end::snippet[]
  );
}

slider-value-always-visible.tsimport '@vaadin/slider';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('slider-value-always-visible')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-slider
        label="Brightness"
        min="0"
        max="100"
        value="75"
        value-always-visible
      ></vaadin-slider>
      <!-- end::snippet[] -->
    `;
  }
}

Step

The step property controls the increment interval between selectable values. The default step is 1. Fractional values like 0.5 are supported for finer control. Steps are calculated relative to the min value.

Open in a
new tab

Source code

SliderStep.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.Slider;
import com.vaadin.flow.router.Route;

@Route("slider-step")
public class SliderStep extends Div {

    public SliderStep() {
        // tag::snippet[]
        Slider slider = new Slider("Volume", 0, 10);
        slider.setValue(5.0);
        slider.setStep(0.5);
        add(slider);
        // end::snippet[]
    }

}
slider-step.tsximport React from 'react';
import { Slider } from '@vaadin/react-components/Slider.js';

function Example() {
  return (
    // tag::snippet[]
    <Slider label="Volume" min={0} max={10} value={5} step={0.5} />
    // end::snippet[]
  );
}

slider-step.tsimport '@vaadin/slider';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('slider-step')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-slider label="Volume" min="0" max="10" value="5" step="0.5"></vaadin-slider>
      <!-- end::snippet[] -->
    `;
  }
}

Basic Features

The following features, common to most input field components, are supported:

Label

The label is used to identify the input field. It supports plain-text content, and its length is limited to the width of the field. Helpers and Tooltips can be used to provide additional information that doesn’t fit into the label.

Visible labels are strongly recommended for all input fields. In cases where the built-in label cannot be used, an external element can be associated as the field’s label through the aria-labelledby attribute. Fields without any visible label should include an invisible label for assistive technologies with the aria-label attribute.

Helper

Helpers are used to provide additional information that the user may need to enter in the field, such as format requirements or explanations of the field’s purpose below the field.

A style variant is available for rendering the helper above the field.

In addition to plain text, helpers can contain components and HTML elements. However, complex and interactive content is likely to have accessibility issues.

Open in a
new tab

Source code

SliderBasicFeatures.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.Slider;
import com.vaadin.flow.router.Route;

@Route("slider-basic-features")
public class SliderBasicFeatures extends Div {

    public SliderBasicFeatures() {
        // tag::snippet[]
        Slider slider = new Slider("Label");
        slider.setHelperText("Helper text");
        add(slider);
        // end::snippet[]
    }

}
slider-basic-features.tsximport React from 'react';
import { Slider } from '@vaadin/react-components/Slider.js';

function Example() {
  return (
    // tag::snippet[]
    <Slider label="Label" helperText="Helper text" />
    // end::snippet[]
  );
}

slider-basic-features.tsimport '@vaadin/slider';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('slider-basic-features')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-slider label="Label" helper-text="Helper text"></vaadin-slider>
      <!-- end::snippet[] -->
    `;
  }
}

Read-Only & Disabled

Fields used to display values should be set to read-only mode to prevent editing. Read-only fields are focusable and visible to screen readers. They can display tooltips. Their values can be selected and copied.

Fields that are currently unavailable should be disabled. The reduced contrast of disabled fields makes them inappropriate for displaying information. They can’t be focused or display tooltips. They’re invisible to screen readers, and their values cannot be selected and copied.

Disabled fields can be useful in situations where they can become enabled based on some user action. Consider hiding fields entirely if there’s nothing the user can do to make them editable.

Open in a
new tab

Source code

SliderReadonlyAndDisabled.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.slider.Slider;
import com.vaadin.flow.router.Route;

@Route("slider-readonly-and-disabled")
public class SliderReadonlyAndDisabled extends HorizontalLayout {

    public SliderReadonlyAndDisabled() {
        setPadding(false);

        // tag::snippet[]
        Slider readonlySlider = new Slider("Read-only");
        readonlySlider.setValue(50.0);
        readonlySlider.setReadOnly(true);

        Slider disabledSlider = new Slider("Disabled");
        disabledSlider.setEnabled(false);
        // end::snippet[]

        add(readonlySlider, disabledSlider);
    }

}
slider-readonly-and-disabled.tsximport React from 'react';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { Slider } from '@vaadin/react-components/Slider.js';

function Example() {
  return (
    <HorizontalLayout theme="spacing">
      {/* tag::snippet[] */}
      <Slider readonly label="Read-only" value={50} />

      <Slider disabled label="Disabled" />
      {/* end::snippet[] */}
    </HorizontalLayout>
  );
}

slider-readonly-and-disabled.tsimport '@vaadin/horizontal-layout';
import '@vaadin/slider';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('slider-readonly-and-disabled')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-horizontal-layout theme="spacing">
        <!-- tag::snippet[] -->
        <vaadin-slider readonly label="Read-only" value="50"></vaadin-slider>

        <vaadin-slider disabled label="Disabled"></vaadin-slider>
        <!-- end::snippet[] -->
      </vaadin-horizontal-layout>
    `;
  }
}

Accessible Thumb Names

Range Slider has two thumbs, each with a default accessible name derived from the label (e.g., "Price range min" and "Price range max"). It’s possible to provide custom accessible names for each thumb to improve the experience for screen reader users.

Open in a
new tab

Source code

RangeSliderAccessibleName.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.RangeSlider;
import com.vaadin.flow.component.slider.RangeSliderValue;
import com.vaadin.flow.router.Route;

@Route("range-slider-accessible-name")
public class RangeSliderAccessibleName extends Div {

    public RangeSliderAccessibleName() {
        // tag::snippet[]
        RangeSlider rangeSlider = new RangeSlider("Price range", 0, 1000);
        rangeSlider.setValue(new RangeSliderValue(200, 800));
        rangeSlider.setAccessibleNameStart("Minimum price");
        rangeSlider.setAccessibleNameEnd("Maximum price");
        add(rangeSlider);
        // end::snippet[]
    }

}
range-slider-accessible-name.tsximport React from 'react';
import { RangeSlider } from '@vaadin/react-components/RangeSlider.js';

function Example() {
  return (
    // tag::snippet[]
    <RangeSlider
      label="Price range"
      min={0}
      max={1000}
      value={[200, 800]}
      accessibleNameStart="Minimum price"
      accessibleNameEnd="Maximum price"
    />
    // end::snippet[]
  );
}

range-slider-accessible-name.tsimport '@vaadin/slider/vaadin-range-slider.js';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('range-slider-accessible-name')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-range-slider
        label="Price range"
        min="0"
        max="1000"
        .value="${[200, 800]}"
        accessible-name-start="Minimum price"
        accessible-name-end="Maximum price"
      ></vaadin-range-slider>
      <!-- end::snippet[] -->
    `;
  }
}

Validation

Unlike other input fields, Slider and Range Slider don’t have built-in constraint validation. However, they do support invalid state and error messages, so you can implement custom validation logic.

The following example validates that the selected price range spans at least $200. Try narrowing the range to less than $200 to see the validation error:

Open in a
new tab

Source code

RangeSliderCustomValidation.javapackage com.vaadin.demo.component.slider;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.slider.RangeSlider;
import com.vaadin.flow.component.slider.RangeSliderValue;
import com.vaadin.flow.data.binder.Binder;
import com.vaadin.flow.router.Route;

@Route("range-slider-custom-validation")
public class RangeSliderCustomValidation extends Div {

    public static class PriceFilter {
        private int minPrice = 200;
        private int maxPrice = 800;

        public int getMinPrice() {
            return minPrice;
        }

        public void setMinPrice(int minPrice) {
            this.minPrice = minPrice;
        }

        public int getMaxPrice() {
            return maxPrice;
        }

        public void setMaxPrice(int maxPrice) {
            this.maxPrice = maxPrice;
        }
    }

    public RangeSliderCustomValidation() {
        // tag::snippet[]
        RangeSlider rangeSlider = new RangeSlider("Price Range", 0, 1000);
        rangeSlider.setStep(50);
        rangeSlider.setMinMaxVisible(true);

        Binder<PriceFilter> binder = new Binder<>();
        binder.forField(rangeSlider)
                .withValidator(value -> value.end() - value.start() >= 200,
                        "Price range must span at least $200")
                .bind(product -> {
                    return new RangeSliderValue(product.getMinPrice(),
                            product.getMaxPrice());
                }, (product, value) -> {
                    product.setMinPrice((int) value.start());
                    product.setMaxPrice((int) value.end());
                });

        binder.setBean(new PriceFilter());

        add(rangeSlider);
        // end::snippet[]
    }

}
range-slider-custom-validation.tsximport React, { useState } from 'react';
import type { RangeSliderChangeEvent } from '@vaadin/react-components/RangeSlider.js';
import { RangeSlider } from '@vaadin/react-components/RangeSlider.js';

function Example() {
  // tag::snippet[]
  const [invalid, setInvalid] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [value, setValue] = useState([200, 800]);

  return (
    <RangeSlider
      label="Price Range"
      min={0}
      max={1000}
      step={50}
      value={value}
      invalid={invalid}
      errorMessage={errorMessage}
      onChange={(e: RangeSliderChangeEvent) => {
        setValue(e.target.value);
        const [start, end] = e.target.value;
        if (end - start < 200) {
          setErrorMessage('Price range must span at least $200');
          setInvalid(true);
        } else {
          setInvalid(false);
        }
      }}
    />
  );
  // end::snippet[]
}

range-slider-custom-validation.tsimport '@vaadin/slider/vaadin-range-slider.js';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import type { RangeSliderChangeEvent } from '@vaadin/slider/vaadin-range-slider.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('range-slider-custom-validation')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  @state()
  private invalid = false;

  @state()
  private errorMessage = '';

  @state()
  private value = [200, 800];

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-range-slider
        label="Price Range"
        min="0"
        max="1000"
        step="50"
        .value="${this.value}"
        .invalid="${this.invalid}"
        .errorMessage="${this.errorMessage}"
        @change="${(e: RangeSliderChangeEvent) => {
          this.value = e.target.value;
          const [start, end] = e.target.value;
          if (end - start < 200) {
            this.errorMessage = 'Price range must span at least $200';
            this.invalid = true;
          } else {
            this.invalid = false;
          }
        }}"
      ></vaadin-range-slider>
      <!-- end::snippet[] -->
    `;
  }
}

Best Practices

Slider is best suited for settings where the user benefits from immediate visual feedback, such as adjusting volume or brightness. Range Slider is best suited for filtering or selecting a subset of a continuous range, such as a price range or date span.

When setting min, max, and step, choose values that result in a reasonable number of selectable steps. Too many steps make precise selection difficult; too few limit the user’s options.

Component	Usage Recommendation
Number Field	For precise numeric input where exact values matter.

Component

Usage Recommendation

Number Field

For precise numeric input where exact values matter.

Docs

Docs

Slider

Range Slider

Min & Max Labels

Persistent Value Display

Step

Basic Features

Read-Only & Disabled

Accessible Thumb Names

Validation

Best Practices

Docs

Range Slider

Min & Max Labels

Persistent Value Display

Step

Basic Features

Read-Only & Disabled

Accessible Thumb Names

Validation

Best Practices

Related Components