Skip to content
On this page

Sliders

Material Web catalog**

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.

Usage

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

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

Continuous

Allows users to select a value along a subjective range.

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

Discrete

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

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

Range

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

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

Value label

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.

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

Theming

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

Tokens

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

Example

Image of a slider with a different theme applied

html
<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>

API

MdSlider <md-slider>

Properties

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

Methods

MethodParametersReturnsDescription
formResetCallbackNonevoid
formStateRestoreCallbackstatevoid

Events

EventTypeBubblesComposedDescription
changeEventYesNoThe native change event on <input>
inputInputEventYesYesThe native input event on <input>
Sliders has loaded