Sliders

arrow_back arrow_forward

Sliders allow users to select from a range of values. They reflect a range along a track and support continuous, discrete, and range modes.

Variants

Continuous

With labels

100

Range slider

<!-- Continuous -->
<div class="ds-sl">
  <div class="ds-sl-f" style="width:60%;"></div>
  <div class="ds-sl-t" style="left:60%;"></div>
</div>

<!-- With labels -->
<div style="display:flex;align-items:center;gap:12px;">
  <span>0</span>
  <div class="ds-sl" style="flex:1;">
    <div class="ds-sl-f" style="width:35%;"></div>
    <div class="ds-sl-t" style="left:35%;"></div>
  </div>
  <span>100</span>
</div>

<!-- Range -->
<div class="ds-sl">
  <div class="ds-sl-f" style="left:25%;right:35%;"></div>
  <div class="ds-sl-t" style="left:25%;"></div>
  <div class="ds-sl-t" style="left:65%;"></div>
</div>

Specs

Property	Value	Token
Track height	4px	`slider.track.height`
Thumb size	20px	`slider.thumb.size`
Active color	#A614C3	`color.primary`
Inactive color	#DCE4E1	`color.outline-variant`

← Previous Skeleton Next → Snackbar