/ slider

Slider

@kumiki/atelier/slider

Layer 5 preview — styled Slider (horizontal + vertical, RTL-aware).

Source

Pure state machines (FSMs). No DOM. Run in server, Vitest, Worker. Reach for these when you only want the behavior.

State machine

APG slider (single-thumb here; range slider composes two).

Source package: @kumiki/machines/slider
Initial state: idle
Top-level states: idle,disabled

toJSON() snapshot Open in stately.ai/viz

Install

pnpm add @kumiki/machines

Pure-TS — clamp + snap

import { createSliderMachine } from '@kumiki/machines/slider';

const m = createSliderMachine({ min: 0, max: 100, step: 5 });
m.send({ type: 'SET.VALUE', value: 13 });
console.log(m.context.value); // 15 (snapped)
m.send({ type: 'SET.VALUE', value: 200 });
console.log(m.context.value); // 100 (clamped)

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Install

pnpm add @kumiki/headless

Drive your own DOM

<script lang="ts">
  import { createSlider } from '@kumiki/headless/slider';
  const s = createSlider();
</script>

<div {@attach s.root}>
  <div {@attach s.thumb} aria-label="Volume"></div>
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Install

pnpm add @kumiki/components/slider

Basic — volume slider

<script lang="ts">
  import { Root, Thumb } from '@kumiki/components/slider';
  let value = $state(50);
</script>

<Root bind:value min={0} max={100} step={1}>
  <Thumb aria-label="Volume" />
</Root>

Vertical + custom step

<Root bind:value orientation="vertical" min={0} max={1} step={0.1} pageStep={0.25}>
  <Thumb aria-label="Brightness" />
</Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Volume slider

<script lang="ts">
  import { Tailwind as Slider } from '@kumiki/atelier/slider';
  let value = $state(40);
</script>

<Slider.Root min={0} max={100} step={1} bind:value aria-label="Volume">
  <Slider.Thumb />
</Slider.Root>

Key	Effect
`Arrow ←/→ ↑/↓`	Step value by `step`.
`PageUp / PageDown`	Step by `pageStep`.
`Home / End`	Jump to min / max.

This component, layer by layer

Keyboard

Test discipline