Component reference
Sliders
Material 3 Expressive Slider components for selecting from a range of values.
Material 3Web ComponentFramework agnostic
Usage
Sliders reflect a range of values along a bar, from which users may select a single value.
<m3-slider min="0" max="100" value="50"></m3-slider>Disabled State
Sliders can be disabled to prevent user interaction.
<m3-slider disabled value="30"></m3-slider>
<m3-slider disabled value="75"></m3-slider>Interactive Example
Listen to the native input event to respond while the value changes.
volume_down
Volume Value: 50
<m3-slider
min="0"
max="100"
[value]="volume"
(input)="onSliderChange($event, 'volume')">
</m3-slider>
<p>Volume: {{volume}}</p>