スライダー

<%# 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;
}