Example
There are two types of sliders: continuous and discrete
<mc-slider max=100 min=0 value=50></mc-slider> <mc-slider max=100 min=0 range value-end=75 value-start=25></mc-slider> <mc-slider max=100 min=0 step=10 value=50>label</mc-slider> <mc-slider max=100 min=0 value=50> <mc-icon slot=leading-icon>volume_up</mc-icon> volume </mc-slider>
Slider
<mc-slider max=100 min=0 value=50></mc-slider> <mc-slider max=100 min=0 value=50> label </mc-slider> <mc-slider max=100 min=0 value=50> <mc-icon slot=leading-icon>volume_up</mc-icon> volume </mc-slider>
Slider with steps
<mc-slider max=100 min=0 step=10 value=50></mc-slider> <mc-slider max=100 min=0 range step=10 value-end=70 value-start=30></mc-slider>
Slider range
<mc-slider max=100 min=0 range value-end=75 value-start=25></mc-slider> <mc-slider max=100 min=0 range value-end=75 value-start=25> label </mc-slider> <mc-slider max=100 min=0 range value-end=75 value-start=25> <mc-icon slot=leading-icon>volume_up</mc-icon> volume </mc-slider>
Style
CSS variables that allow you override default values
/* Optional variables for overriding */ --mc-slider-handle-color: var(--mc-primary); --mc-slider-active-track-color: var(--mc-primary); --mc-slider-inactive-track-color: var(--mc-primary-container);