Sliders

• Design article
• API Documentation
• Source code

Open interactive demo in new tab.

Sliders may be continuous or discrete, and may also represent a range.

<md-slider></md-slider>
<md-slider ticks value="50"></md-slider>
<md-slider range value-start="25" value-end="75"></md-slider>

Allows users to select a value along a subjective range.

<md-slider min="0" max="100" value="50"></md-slider>

Allows users to select a specific value from a predetermined range. Tick marks may be used to indicate available values.

<md-slider step="5" ticks min="0" max="20"></md-slider>

A range slider has two handles, and indicates a minimum and maximum value in a range.

<md-slider range value-start="25" value-end="50"></md-slider>

A value label displays the specific value that corresponds with the handle's placement.

The label appears when the handle is selected. For range sliders, labels appear when either handle is selected.

<md-slider labeled></md-slider>

Slider supports Material theming and can be customized in terms of color and shape.

• All tokens

<style>
:root {
  /* System tokens */
  --md-sys-color-primary: #006A6A;

  /* Component tokens */
  --md-slider-handle-shape: 0px;
}
</style>

<md-slider
  range
  value-start="25"
  value-end="75"
  ticks
  step="5"
></md-slider>