Slider

Material Design 3 slider for selecting values from a range. Not intended for precise numeric entry; use a text field when exact values are required.

Basic Usage

Use sliders to adjust a value within a range. This is the recommended baseline because it provides both a continuous `input` event while dragging and a `change` event on commit. 

              <ds-slider label="Volume" min="0" max="100" value="50"></ds-slider>

Variants

Use steps, ranges, colors, or sizes for different behaviors.

Continuous

Smooth value selection without defined steps.

  • Use when: Any value in the range is valid, such as volume or brightness.
  • Avoid when: Only specific values are meaningful; use a stepped slider.
Volume: 50 
              <ds-slider min="0" max="100" value="50"></ds-slider>

Stepped

Snap values using a fixed step increment.

  • Use when: Discrete values are meaningful, such as quantities or ratings.
  • Avoid when: Steps would create frustrating precision constraints for the user.
Quantity: 5 
              <ds-slider min="0" max="10" value="5" step="1"></ds-slider>

Range

Select a minimum and maximum value.

  • Use when: Users need to filter by a value band, such as price range.
  • Avoid when: Only a single value is needed; use a standard slider.
Price Range: $25 - $75 
              <ds-slider min="0" max="100" value-start="25" value-end="75" range></ds-slider>

Colors

Use the color attribute for emphasis.

              <ds-slider value="60" color="primary"></ds-slider>
              <ds-slider value="60" color="secondary"></ds-slider>
              <ds-slider value="60" color="tertiary"></ds-slider>

Sizes

Use size to align with layout density.

              <ds-slider value="40" size="sm"></ds-slider>
              <ds-slider value="50" size="md"></ds-slider>
              <ds-slider value="60" size="lg"></ds-slider>

States

Use disabled to prevent interaction.

              <ds-slider min="0" max="100" value="40" disabled></ds-slider>

Interactive Example

Listen for input and change events.

Temperature Control Current: 70°F
Adjust the slider to see events... 
              <ds-slider id="temp-slider" min="60" max="80" value="70"></ds-slider>

              <script>
  const slider = document.getElementById("temp-slider");
  slider.addEventListener("input", (e) => {
    console.log("Value changing:", e.detail.value);
  });
  slider.addEventListener("change", (e) => {
    console.log("Value changed:", e.detail.value);
  });
              </script>

API

Attributes

Attribute Type Default Description
name string "" Form field name. The value is submitted under it; without a name the field is left out.
min number 0 Minimum value.
max number 100 Maximum value.
value number 50 Current value (single slider).
step number 1 Step increment for snapping.
range boolean false Enable range mode with two thumbs.
value-start number 25 Start value (range slider).
value-end number 75 End value (range slider).
disabled boolean false Disable the slider.
label string "" Label displayed above the slider.
color string "primary" Color scheme: primary, secondary, tertiary, error.
size string "" Size of the slider (sm, md, lg).

Forms

Submits its value as a string. A range slider submits two entries under its name, start then end, the way a multi-select submits several. It resets with its form, and a disabled <fieldset> disables it. form, validity, validationMessage, checkValidity() and reportValidity() behave as on a native control.

Properties

Property Type Description
value number Get or set current value.
valueStart number Get or set start value (range).
valueEnd number Get or set end value (range).
min number Get or set minimum value.
max number Get or set maximum value.
step number Get or set step increment.
disabled boolean Get or set disabled state.
range boolean Get or set range mode.
color string Get or set color scheme.
size string Get or set size.

Events

Event Detail Description
input { value, valueStart, valueEnd } Fired continuously while dragging.
change { value, valueStart, valueEnd } Fired when value changes (drag end).

CSS Parts

Part Description
None.

CSS Custom Properties

Property Description
--slider-height Track height (default: var(--ds-slider-height)).
--slider-thumb-size Thumb size (default: var(--ds-slider-thumb-size)).
--slider-color Active track and thumb border color.
--slider-track-color Inactive track color.
--ds-slider-height Slider height (default: calc(var(--ds-size-icon-sm, 14px) / 3.5)).
--ds-slider-thumb-size Slider thumb size (default: calc(var(--ds-size-icon-md, 18px) - 2px)).

Accessibility

Keyboard Map

Each thumb is a focusable role="slider" element. In range mode both thumbs are in the tab order; a disabled slider is skipped.

Key Context Expected Result
Tab / Shift+Tab Slider not focused Moves focus to a thumb (or past it).
→ / ↑ Thumb focused Increases the value by one step.
← / ↓ Thumb focused Decreases the value by one step.
Page Up / Page Down Thumb focused Moves by a larger increment (10% of the range, or one step, whichever is greater).
Home / End Thumb focused Jumps to the minimum / maximum the thumb is allowed to reach. In range mode a thumb stops at the other thumb.

Semantics

  • Provide the accessible name with the label attribute. It is applied to the thumb as aria-label; in range mode the thumbs read as "label minimum" and "label maximum".
  • Each thumb exposes aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext, kept in sync on both pointer and keyboard changes. In range mode the thumbs' min/max close in on each other so neither can be moved past the other.
  • A keyboard change emits both input and change on the same keystroke, matching a native range input.

Usage Guidelines

  • When to use: Range-based adjustments where the approximate value matters more than a precise number.
  • When not to use: When users need to enter a specific number; use a text field paired with validation.
  • Composition: Display the current value alongside the slider using the input event.
  • Common mistakes: Omitting the label attribute, and not providing visual value feedback while dragging.
control.