Sliders

Example

There are two types of sliders: continuous and discrete

label

volume_up volume

<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

label

volume_up volume

<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

label

volume_up volume

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