Example
There are two types of sliders: continuous and discrete
<mc-slider min="0" max="100" value="50"></mc-slider> <mc-slider range min="0" max="100" value-start="25" value-end="75"></mc-slider> <mc-slider min="0" max="100" step="10" value="50">label</mc-slider> <mc-slider min="0" max="100" value="50"> <mc-icon slot="leading-icon">volume_up</mc-icon> volume </mc-slider>
Slider
<mc-slider min="0" max="100" value="50"></mc-slider> <mc-slider min="0" max="100" value="50"> label </mc-slider> <mc-slider min="0" max="100" value="50"> <mc-icon slot="leading-icon">volume_up</mc-icon> volume </mc-slider>
Slider with steps
<mc-slider min="0" max="100" step="10" value="50"></mc-slider> <mc-slider range min="0" max="100" step="10" value-start="30" value-end="70"></mc-slider>
Slider range
<mc-slider range min="0" max="100" value-start="25" value-end="75"></mc-slider> <mc-slider range min="0" max="100" value-start="25" value-end="75"> label </mc-slider> <mc-slider range min="0" max="100" value-start="25" value-end="75"> <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);