Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons
Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets
Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities
home apps Buttons palette Two
Materially
github-circle-black-transparent

Sliders

Sliders let users make selections from a range of values
Material Design Guidelines: 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);
            
menu home apps Get started