Slider

<%# 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">
  <%# The hidden field carries the value into the form; it is optional. %>
  <input type="hidden" name="volume" data-stimeo--slider-target="field" />
  <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>

<%# Readout: what the component just reported. Purely visual — the component
    already announces what a screen reader needs, so this line is aria-hidden to
    keep it from being read twice. The value is a code fragment (API identifiers
    and values), so only the label is translated. %>
<p class="demo-readout" aria-hidden="true">
  <span><%= t("catalog.readout.field") %></span>
  <span class="demo-readout__value" data-readout
        data-empty-text="<%= t("catalog.readout.empty") %>">—</span>
</p>

/*
 * 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;
}

// The hidden field mirrors the value, and for a move the user made it emits the
// native `change` a form already listens to — so `stimeo--auto-submit`, form
// validation, or any `change` handler on the `<form>` reacts without knowing what
// this component is. A refresh that follows a morph or a repair is silent, and
// the component reports a value the page moved — a runtime `min` / `max` /
// `step` / `value` change — as `stimeo--slider:reconcile`. This demo reads both
// events, so the readout follows the user's moves and the page's.
// The page chrome uses some of these controllers too (the nav, the tab strip),
// so everything below is scoped to the demo itself.
const demoStage = document.querySelector(".demo-stage") ?? document;
const fieldReadout = demoStage.querySelector("[data-readout]");
const fieldSources = demoStage.querySelectorAll("[data-stimeo--slider-target='field']");

// An input without a `name` is not a submitted control, so it is left out.
const submitted = () =>
  Array.from(demoStage.querySelectorAll("[data-stimeo--slider-target='field']"))
    .filter((input) => input.name)
    .map((input) => `${input.name}=${input.value}`)
    .join(" & ") || fieldReadout?.dataset.emptyText || "";

const showSubmitted = () => {
  if (fieldReadout) fieldReadout.textContent = submitted();
};

for (const source of fieldSources) source.addEventListener("change", showSubmitted);
demoStage.addEventListener("stimeo--slider:reconcile", showSubmitted);
showSubmitted();