Introducing DtSlider: Accessible value and range selection

At a glance #

• DtSlider supports single values and ranges, horizontal and vertical layouts, ticks, marks, and start and end slots.
• Each thumb uses a native <input type="range"> for keyboard navigation, focus, form submission, and screen reader semantics.
• The default tooltip readout shows the value without reserving layout space or being clipped by a parent container. Use always to keep it visible, or never to hide it.
• Use step for fixed increments and snapPoints for a magnetic pull toward anchor values when clicking, tapping, or dragging.
• It supports right-to-left (RTL) layouts and dark mode, and respects reduced-motion settings. Each thumb has a 44×44px touch target.
• Storybook

Meet DtSlider #

Pass a number to modelValue for one thumb, or an array of two numbers for a range. The examples below show both modes and the start and end slots.

<dt-slider :model-value="50" label="Volume" />
<dt-slider
  :model-value="[20, 70]"
  label="Price range"
  :show-marks="[{ value: 0, text: 'Min $0' }, { value: 100, text: 'Max $100' }]"
  :get-value-text="(value, index) => index === 0 ? `Minimum: $${value}` : `Maximum: $${value}`"
/>
<dt-slider :model-value="60" label="Brightness">
  <template #start>
    <dt-icon-sun-dim size="200" aria-label="Dim" />
  </template>
  <template #end>
    <dt-icon-sun size="200" aria-label="Bright" />
  </template>
</dt-slider>

Anatomy #

Select a part below to highlight it on the slider.

<div class="anatomy-demo" :data-part="anatomyPart">
  <dt-slider
    v-model="anatomyValue"
    label="Volume"
    suffix="%"
    readout="always"
    :show-ticks="25"
    :show-marks="[0, 25, 50, 75, 100]"
  >
    <template #start>
      <dt-icon-volume-1 size="200" aria-label="Quiet" />
    </template>
    <template #end>
      <dt-icon-volume-2 size="200" aria-label="Loud" />
    </template>
  </dt-slider>
</div>
<dt-radio-group v-model="anatomyPart" name="anatomy-part" legend="Highlight a part">
  <dt-radio v-for="part in anatomyParts" :key="part.value" :value="part.value">
    {{ part.label }}
  </dt-radio>
</dt-radio-group>

When to use a slider #

When both feel and precision matter, pair the slider with number inputs bound to the same value. This works especially well on touch devices, where dragging to an exact value is harder.

<dt-slider
  v-model="meetingHours"
  label="Meeting hours"
  :min="8"
  :max="18"
  :show-ticks="1"
  :min-gap-steps="1"
  :get-value-text="(value, index) => `${index === 0 ? 'Start' : 'End'}: ${value}:00`"
/>
<dt-stack direction="row" gap="100" align="center">
  <dt-input
    v-model.number="meetingHours[0]"
    label-strength="medium"
    label-size="200"
    label="Start"
    type="number"
    :min="8"
    :max="meetingHours[1] - 1"
  />
  <dt-input
    v-model.number="meetingHours[1]"
    label-strength="medium"
    label-size="200"
    label="End"
    type="number"
    :min="meetingHours[0] + 1"
    :max="18"
  />
</dt-stack>

Values, ticks, marks, and snapping #

Ticks and marks #

Ticks are small dots along the track. Set show-ticks to true to follow step, or pass a number to set a different interval. Marks are text labels set with show-marks: pass true to label min and max, or an array for specific values. Neither changes which values users can select.

On a fine-grained scale, pair frequent ticks with sparse marks to avoid clutter.

<dt-slider
  :model-value="0"
  label="Balance"
  :min="-100"
  :max="100"
  :show-marks="[{ value: -100, text: '−100' }, { value: 0, text: '0' }, { value: 100, text: '100' }]"
  :show-ticks="25"
/>
<dt-slider
  :model-value="7"
  label="Rating"
  :min="0"
  :max="10"
  :step="1"
  :show-ticks="1"
  :show-marks="true"
/>

Steps and magnetic snapping #

step sets the increment between values. snapPoints pulls the thumb toward anchor values, like snapping to guides in a design tool. Pass a number for evenly spaced snap points, or an array for specific values.

Snapping applies to clicks, taps, and dragging; keyboard navigation follows step.

<dt-slider
  :model-value="62"
  label="Budget cap"
  :min="0"
  :max="100"
  :snap-points="25"
  :show-ticks="25"
  suffix="%"
/>
<dt-slider
  :model-value="60"
  label="Zoom level"
  :min="10"
  :max="400"
  :snap-points="[25, 50, 75, 100, 150, 200, 300]"
  suffix="%"
/>

Drag the first slider onto 25, then away again. Notice how it holds near 25 before releasing.

The value readout #

The readout prop controls when and where the current value appears:

• tooltip (default): appears above the thumb on hover, focus, or drag. It reserves no layout space, which suits forms and toolbars.
• always: stays visible below the track. Use it when users need to see the value without interacting, such as on a dashboard.
• never: hides the readout. Use it when you display the value elsewhere on the page.

The floating readout requires the browser's Popover API. Use readout="always" when supporting browsers without it.

<dt-slider :model-value="48" label="Volume" />
<dt-slider :model-value="48" label="Volume" readout="always" />
<dt-slider :model-value="48" label="Volume" readout="never" />

Readouts and screen reader announcements share the same value formatting. Use prefix and suffix to add text around the value (e.g., suffix="%"), or getValueText for custom formatting.

Accessibility and the native input #

Each thumb is a visually hidden native <input type="range">. The browser provides:

• The slider role and its minimum, maximum, and current value.
• Tab order and focus.
• Arrow keys, Home, and End.
• Quantizing to step and clamping to min and max.
• Form behavior: set name to include the value in a form submission. In range mode, both thumbs share the name; read both values in [low, high] order with FormData.getAll(name).

DtSlider supports two thumbs for ranges. Page Up, Page Down, and Shift + Arrow move by largeStep, rounded to a whole number of steps (at least one).

Give every slider a label. For a range, pass getValueText so screen readers distinguish the thumbs (e.g., "Minimum: $20" and "Maximum: $70").

What DtSlider isn't for #

• DtSlider doesn't represent steps in a multi-step flow.
• To show progress, such as upload status, use DtProgressCircle.
• DtSlider isn't built for audio or video seeking, where the control also tracks playback position.

See the full component documentation for all prop values, demos, and usage guidance.