material-web/docs/components/slider.md

Sliders

This documentation is fully rendered on the 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.

• Design article
• API Documentation
• Source code

Usage

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>

Continuous

Allows users to select a value along a subjective range.

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

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

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

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

Theming

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

Tokens

Token	Default value
--md-slider-active-track-color	--md-sys-color-primary
--md-slider-active-track-shape	9999px
--md-slider-inactive-track-color	--md-sys-color-surface-container-highest
--md-slider-inactive-track-shape	9999px
--md-slider-handle-color	--md-sys-color-primary
--md-slider-handle-shape	9999px

• All tokens

Example

<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

Property	Attribute	Type	Default	Description
disabled	disabled	boolean	false	Whether or not the slider is disabled.
min	min	number	0	The slider minimum value
max	max	number	100	The slider maximum value
value	value	number	undefined	The slider value displayed when range is false.
valueStart	value-start	number	undefined	The slider start value displayed when range is true.
valueEnd	value-end	number	undefined	The slider end value displayed when range is true.
valueLabel	value-label	string	''	An optional label for the slider's value displayed when range is false; if not set, the label is the value itself.
valueLabelStart	value-label-start	string	''	An optional label for the slider's start value displayed when range is true; if not set, the label is the valueStart itself.
valueLabelEnd	value-label-end	string	''	An optional label for the slider's end value displayed when range is true; if not set, the label is the valueEnd itself.
ariaLabelStart	aria-label-start	string	''	Aria label for the slider's start handle displayed when range is true.
ariaValueTextStart	aria-valuetext-start	string	''	Aria value text for the slider's start value displayed when range is true.
ariaLabelEnd	aria-label-end	string	''	Aria label for the slider's end handle displayed when range is true.
ariaValueTextEnd	aria-valuetext-end	string	''	Aria value text for the slider's end value displayed when range is true.
step	step	number	1	The step between values.
ticks	ticks	boolean	false	Whether or not to show tick marks.
labeled	labeled	boolean	false	Whether or not to show a value label when activated.
range	range	boolean	false	Whether 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.
name		string	undefined
nameStart		string	undefined
nameEnd		string	undefined
form		HTMLFormElement	undefined
labels		NodeList	undefined