Sliders

Example

There are two types of sliders: continuous and discrete

label

volume_up volume

<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

label

volume_up volume

<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

label

volume_up volume

<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);