Sliders

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.

Sliders can use icons or labels to represent a numeric or relative scale.

Sound settings screen with sliders labeled 'Media volume', and 'Call volume'.

View interactive demo inline.

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.

TokenDefault value
--md-slider-active-track-color--md-sys-color-primary
--md-slider-active-track-shape--md-sys-shape-corner-full
--md-slider-inactive-track-color--md-sys-color-surface-container-highest
--md-slider-inactive-track-shape--md-sys-shape-corner-full
--md-slider-handle-color--md-sys-color-primary
--md-slider-handle-shape--md-sys-shape-corner-full
<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>
PropertyAttributeTypeDefaultDescription
minminnumber0The slider minimum value
maxmaxnumber100The slider maximum value
valuevaluenumberundefinedThe slider value displayed when range is false.
valueStartvalue-startnumberundefinedThe slider start value displayed when range is true.
valueEndvalue-endnumberundefinedThe slider end value displayed when range is true.
valueLabelvalue-labelstring''An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.
valueLabelStartvalue-label-startstring''An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.
valueLabelEndvalue-label-endstring''An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.
ariaLabelStartaria-label-startstring''Aria label for the slider's start handle displayed when range is true.
ariaValueTextStartaria-valuetext-startstring''Aria value text for the slider's start value displayed when range is true.
ariaLabelEndaria-label-endstring''Aria label for the slider's end handle displayed when range is true.
ariaValueTextEndaria-valuetext-endstring''Aria value text for the slider's end value displayed when range is true.
stepstepnumber1The step between values.
ticksticksbooleanfalseWhether or not to show tick marks.
labeledlabeledbooleanfalseWhether or not to show a value label when activated.
rangerangebooleanfalseWhether or not to show a value range. When false, the slider displays a slideable handle for the value property; when true, it displays slideable handles for the valueStart and valueEnd properties.
disabledbooleanundefined
namestringundefined
nameStartstringundefined
nameEndstringundefined
MethodParametersReturnsDescription
formResetCallbackNonevoid
formStateRestoreCallbackstatevoid
EventTypeBubblesComposedDescription
changeEventYesNoThe native change event on <input>
inputInputEventYesYesThe native input event on <input>
About
IntroductionQuick StartRoadmapSupportBundle Sizes
Theming
Material ThemingColorTypographyShape
Components
ButtonsCheckboxChipsDialogsFloating action button (FAB)Icon ButtonsListsMenusProgress indicatorsRadioRippleSelectSlidersSwitchTabsText field