Slider

Range with value

<div class="dsgn-field" style="max-inline-size: 24rem">
  <div class="dsgn-slider-label"><label class="dsgn-label" for="dx-rem">First reminder</label>
    <output class="dsgn-slider-value" for="dx-rem" data-suffix=" days">7 days</output></div>
  <input type="range" class="dsgn-slider" id="dx-rem" min="1" max="30" value="7">
</div>

Usage

The input is one control height tall, so a slider lines up with inputs and buttons in a row. Track = space-4 in border-strong (3:1 on any surface), filled part and thumb = accent-solid, thumb = control-indicator with a surface ring. Arrow keys, Page Up/Down, Home/End are native.

Details

Classes

.dsgn-slider .dsgn-slider-label .dsgn-slider-value

Tokens used

--dsgn-border --dsgn-border-strong --dsgn-control-height --dsgn-control-indicator --dsgn-control-solid --dsgn-control-solid-hover --dsgn-control-solid-pressed --dsgn-focus --dsgn-focus-offset --dsgn-focus-width --dsgn-font-sans --dsgn-font-size-body-s --dsgn-line-height-body-s --dsgn-radius-m --dsgn-space-2 --dsgn-space-4 --dsgn-space-8 --dsgn-surface-raised --dsgn-text-disabled --dsgn-text-muted

In Figma

Slider

Import alone

dsgn.systems/components/slider.css