Slider — Stimeo UI

← All components

The stimeo--slider controller implements the WAI-ARIA Slider pattern. The value is exposed to assistive tech via aria-valuenow/min/max on the thumb, and to CSS via the --stimeo--slider-fraction custom property (0..1) on the root so the consumer can position the thumb. Min, max, step, and the initial value are set through data-*-value attributes. The library provides behavior only — all layout is owned by this Playground.

running

Keyboard

Key	Action
`→ / ↑`	Increase the value by one step.
`← / ↓`	Decrease the value by one step.
`PageUp / PageDown`	Move the value by ten steps.
`Home / End`	Jump to the minimum / maximum value.

<%# Markup for the slider (APG Slider / single thumb) demo.
    stimeo--slider provides aria-valuemin/max/now plus keyboard and drag operation, and
    exposes the thumb position fraction (0..1) as the root CSS variable
    --stimeo--slider-fraction. The thumb's actual placement is the Playground's CSS
    using that variable. %>
<div
  class="slider"
  data-controller="stimeo--slider"
  data-stimeo--slider-min-value="0"
  data-stimeo--slider-max-value="100"
  data-stimeo--slider-step-value="1"
  data-stimeo--slider-value-value="40">
  <div class="slider__track" data-stimeo--slider-target="track"
       data-action="pointerdown->stimeo--slider#onPointerDown">
    <div class="slider__range" aria-hidden="true"></div>
    <div class="slider__thumb" role="slider" tabindex="0"
         aria-label="<%= t("components.slider.demo.label") %>"
         data-stimeo--slider-target="thumb"
         data-action="keydown->stimeo--slider#onKeydown"></div>
  </div>
</div>

/*
 * Presentation-only styles for the slider demo.
 * The thumb position is computed from the CSS variable the library exposes on the
 * root: --stimeo--slider-fraction (0..1).
 */

.slider {
  width: min(20rem, 100%);
  padding: 0.75rem 0.625rem;
}

.slider__track {
  position: relative;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--border);
}

/* Fill from 0 to the current value (the fraction) with the accent color. */
.slider__range {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc(var(--stimeo--slider-fraction, 0) * 100%);
  border-radius: 999px;
  background: var(--accent);
}

/* Place the thumb at the fraction position (translateX(-50%) to center it). */
.slider__thumb {
  position: absolute;
  top: 50%;
  left: calc(var(--stimeo--slider-fraction, 0) * 100%);
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--surface-card);
  border: 2px solid var(--accent);
  transform: translate(-50%, -50%);
  cursor: grab;
}

.slider__thumb:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

These demo styles use shared design tokens (light + dark). Copy the shared styles too, then toggle data-theme on your root element for dark mode.

The data-* attributes you add to your own HTML to wire this component. Put the data-controller below on a root element, then place its targets / values / actions inside that element.

On the root element data-controller="stimeo--slider"

Targets

Name	Description	Attribute
`track` required	The rail; a pointerdown sets the value from the press position and starts a drag.	`data-stimeo--slider-target="track"`
`thumb` required	The draggable handle (`role=slider`); its ARIA value reflects the current value.	`data-stimeo--slider-target="thumb"`

Values

Name	Description	Attribute
`min`	Lowest value (default 0); the Home target.	`data-stimeo--slider-min-value`
`max`	Highest value (default 100); the End target.	`data-stimeo--slider-max-value`
`step`	Snap/step increment (default 1); arrows move by it, Page by 10×.	`data-stimeo--slider-step-value`
`value`	Current value (default 0); clamped and snapped on connect.	`data-stimeo--slider-value-value`

Actions

Name	Description	Action
`onKeydown`	Keyboard stepping per APG (Arrows, Page by 10×, Home/End to min/max).	`stimeo--slider#onKeydown`
`onPointerDown`	Starts a pointer drag, setting the value from the pointer position.	`stimeo--slider#onPointerDown`

Events

Name	Event
`change`	`stimeo--slider:change`

State hooks

The library only manages these ARIA/data attributes and custom properties. Your CSS reads them to render the look — selectors like [aria-selected], [aria-expanded], or var(--stimeo--…) hook into this state.

Hook	Target	Meaning
`aria-valuenow`	Thumb	The current value.
`aria-valuemin / aria-valuemax`	Thumb	The minimum and maximum of the range.
`--stimeo--slider-fraction`	Root element	The current value as a 0..1 fraction, used to position the thumb.