Slider

Sliders allow users to view and select a value (or range) along a track. They're ideal for adjusting settings such as volume and brightness, or for applying image filters.

Interactive Demo

Usage

Basic Slider

Sliders can be used standalone with a default value range of 0-100.

<md-slider data-aria-label="Volume"></md-slider>
<md-slider data-aria-label="Brightness" value="75"></md-slider>

Range Slider

Range sliders allow users to select a range between two values using start and end handles.

<md-slider
  range
  value-start="20"
  value-end="80"
  data-aria-label="Price range"
></md-slider>

With Labels

Value labels can be displayed on the handles to show the current value(s).

<md-slider labeled value="50" data-aria-label="Volume"></md-slider>

<md-slider
  range
  labeled
  value-start="20"
  value-end="80"
  data-aria-label="Temperature range"
></md-slider>

With Tick Marks

Tick marks can be displayed along the track to indicate step intervals.

<md-slider ticks step="10" data-aria-label="Volume"></md-slider>

<md-slider
  range
  ticks
  labeled
  step="25"
  value-start="25"
  value-end="75"
  data-aria-label="Range with ticks"
></md-slider>

Custom Range and Step

Customize the minimum, maximum, and step values.

<md-slider
  min="0"
  max="200"
  step="5"
  value="100"
  data-aria-label="Custom range"
></md-slider>

<md-slider
  min="-50"
  max="50"
  step="10"
  value="0"
  data-aria-label="Temperature"
></md-slider>

In Forms

Sliders can be used in forms with the name attribute.

Submit
<form>
  <label>
    Volume
    <md-slider name="volume" value="50" data-aria-label="Volume"></md-slider>
  </label>

  <label>
    Price Range
    <md-slider
      range
      name-start="price-min"
      name-end="price-max"
      value-start="20"
      value-end="80"
      data-aria-label="Price range"
    ></md-slider>
  </label>

  <md-button type="submit">Submit</md-button>
</form>

Accessibility

Add a data-aria-label attribute to sliders to provide accessible labels for screen readers.

<md-slider data-aria-label="Volume level"></md-slider>

<md-slider
  range
  data-aria-label="Price range"
  aria-label-start="Minimum price"
  aria-label-end="Maximum price"
></md-slider>

For custom value text that differs from the numeric value, use data-aria-valuetext attribute:

<md-slider
  value="3"
  min="1"
  max="5"
  data-aria-label="Rating"
  data-aria-valuetext="3 stars"
></md-slider>