Appearance
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.
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
Token | Default 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
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
Property | Attribute | Type | Default | Description |
---|---|---|---|---|
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. |
disabled | boolean | undefined | ||
name | string | undefined | ||
nameStart | string | undefined | ||
nameEnd | string | undefined |
Methods
Method | Parameters | Returns | Description |
---|---|---|---|
formResetCallback | None | void | |
formStateRestoreCallback | state | void |
Events
Event | Type | Bubbles | Composed | Description |
---|---|---|---|---|
change | Event | Yes | No | The native change event on <input> |
input | InputEvent | Yes | Yes | The native input event on <input> |