@spinjs/components 0.0.0-stage → 0.1.0-preview.1

package/dist/signature-pad/signature-pad.presentation.js

@@ -0,0 +1,236 @@
+import { isEmpty, isInteractive as isInteractive$1, tuningOf } from "./signature-pad.state.js";
+import { signaturePad as signaturePad$1 } from "./signature-pad.machine.js";
+import { ariaDisabled, ariaRoleDescription, dataAttr, defineComponent, focuser, isRecord } from "@spinjs/runtime";
+// src/signature-pad/signature-pad.presentation.ts
+const controlPoint = (scope, clientX, clientY) => {
+	const rect = scope.measure("control");
+	if (rect === null) return null;
+	return {
+		x: clientX - rect.left,
+		y: clientY - rect.top,
+		pressure: .5
+	};
+};
+const isClosestable = (value) => {
+	if (typeof value !== "object" || value === null || !("closest" in value)) return false;
+	return typeof value.closest === "function";
+};
+/** The clear trigger sits inside the control: a press from a node nested
+* in it never starts a stroke. Duck-typed — the target may be a stub. */
+const insideClearTrigger = (target) => {
+	if (!isClosestable(target)) return false;
+	return target.closest("[data-part=clear-trigger]") !== null;
+};
+/** A segment-path slot: the recipe passes `{ path: row }`; anything else
+* is an empty path, never a throw. */
+const segmentPathOf = (arg) => {
+	if (!isRecord(arg)) return "";
+	const path = arg["path"];
+	return typeof path === "string" ? path : "";
+};
+const textOf = (arg) => typeof arg === "string" ? arg : "";
+const drawingFill = (drawing) => {
+	if (!isRecord(drawing)) return "currentColor";
+	const fill = drawing["fill"];
+	return typeof fill === "string" && fill.length > 0 ? fill : "currentColor";
+};
+const def = {
+	name: "signature-pad",
+	machine: (args, authored) => signaturePad$1(args, authored),
+	start: "idle",
+	reconcile: ({ context, send }) => {
+		const patch = tuningOf(context.drawing);
+		if ([
+			"size",
+			"thinning",
+			"smoothing",
+			"streamline",
+			"simulatePressure"
+		].some((key) => patch[key] !== void 0 && context.tuning[key] !== patch[key])) {
+			send({
+				type: "SET_TUNING",
+				tuning: patch
+			});
+			return true;
+		}
+		return false;
+	},
+	parts: {
+		root: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-disabled": dataAttr(scope.context.disabled)
+		}) },
+		label: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-disabled": dataAttr(scope.context.disabled),
+			for: scope.id("hiddenInput"),
+			onClick: (event) => {
+				if (!isInteractive$1(scope.context)) return;
+				if (event.defaultPrevented) return;
+				focuser(scope.id)("control");
+			}
+		}) },
+		control: { attrs: (scope) => {
+			const ctx = scope.context;
+			const disabled = scope.context.disabled;
+			return {
+				id: scope.id("control"),
+				role: "application",
+				...ariaRoleDescription("signature pad"),
+				"aria-label": "signature pad",
+				...ariaDisabled(disabled ? "true" : void 0),
+				tabindex: disabled ? void 0 : "0",
+				"data-disabled": dataAttr(disabled),
+				style: {
+					position: "relative",
+					touchAction: "none",
+					userSelect: "none"
+				},
+				"use:drag": {
+					enabled: isInteractive$1(ctx),
+					preventDefault: false,
+					cancelOnEscape: false,
+					onStart: (press) => {
+						if (insideClearTrigger(press.target)) return;
+						if (press.metaKey === true || press.ctrlKey === true || press.altKey) return;
+						const point = controlPoint(scope, press.x, press.y);
+						if (point === null) return;
+						scope.send({
+							type: "POINTER_DOWN",
+							point,
+							pressure: press.pressure
+						});
+					},
+					onMove: (delta) => {
+						if (scope.state !== "drawing") return;
+						const point = controlPoint(scope, delta.x, delta.y);
+						if (point === null) return;
+						scope.send({
+							type: "POINTER_MOVE",
+							point,
+							pressure: delta.pressure
+						});
+					},
+					onEnd: () => {
+						if (!isInteractive$1(scope.context)) return;
+						if (scope.state !== "drawing") return;
+						scope.send({ type: "POINTER_UP" });
+					}
+				}
+			};
+		} },
+		segment: { attrs: (scope) => {
+			const drawing = scope.context.drawing;
+			return { style: {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100%",
+				pointerEvents: "none",
+				fill: drawingFill(drawing)
+			} };
+		} },
+		preview: { attrs: (scope) => {
+			const drawing = scope.context.drawing;
+			const fill = drawingFill(drawing);
+			const rect = scope.measure("control");
+			return {
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					width: "100%",
+					height: "100%",
+					pointerEvents: "none",
+					fill
+				},
+				...rect !== null && rect.width > 0 && rect.height > 0 ? {
+					viewBox: `0 0 ${rect.width} ${rect.height}`,
+					preserveAspectRatio: "xMidYMid meet"
+				} : {}
+			};
+		} },
+		segmentPath: { attrs: (_scope, _arg) => ({ d: segmentPathOf(_arg) }) },
+		guide: { attrs: (scope) => ({
+			dir: scope.context.dir,
+			"data-disabled": dataAttr(scope.context.disabled)
+		}) },
+		clearTrigger: {
+			id: "clear-trigger",
+			attrs: (scope, arg) => {
+				const label = textOf(arg);
+				const ctx = scope.context;
+				const disabled = scope.context.disabled;
+				return {
+					type: "button",
+					"aria-label": label,
+					"data-disabled": dataAttr(disabled),
+					"data-hidden": dataAttr((ctx.paths ?? []).length === 0 || scope.state === "drawing"),
+					disabled: disabled ? true : void 0,
+					onClick: () => {
+						scope.send({ type: "CLEAR" });
+					}
+				};
+			}
+		},
+		hiddenInput: {
+			id: "hidden-input",
+			attrs: (scope, arg) => {
+				const name = textOf(arg);
+				const ctx = scope.context;
+				return {
+					type: "text",
+					hidden: true,
+					disabled: scope.context.disabled ? true : void 0,
+					readonly: true,
+					name: name.length > 0 ? name : void 0,
+					value: (ctx.paths ?? []).join("\n")
+				};
+			}
+		}
+	},
+	commands: { clear: { event: () => ({ type: "CLEAR" }) } },
+	readers: {
+		empty: { read: (context) => isEmpty(context) },
+		drawing: { read: (_context, state) => state === "drawing" },
+		currentPath: { read: (context) => context.currentPath },
+		paths: { read: (context) => [...context.paths] },
+		disabled: { read: (context) => context.disabled === true }
+	},
+	methods: { getDataUrl: { call: (context) => {
+		const paths = (context.paths ?? []).map((d) => `<path d="${d}"/>`).join("");
+		const svg = `<svg xmlns="http://www.w3.org/2000/svg" fill="${drawingFill(context.drawing)}">${paths}</svg>`;
+		return Promise.resolve(`data:image/svg+xml,${encodeURIComponent(svg)}`);
+	} } },
+	events: {
+		draw: {
+			prop: "onDraw",
+			watch: () => [],
+			detail: () => ({
+				paths: [],
+				currentPath: null
+			}),
+			select: (event, _before, after) => event.type === "POINTER_DOWN" || event.type === "POINTER_MOVE" || event.type === "POINTER_UP" || event.type === "CLEAR" ? {
+				paths: [...after.paths],
+				currentPath: after.currentPath
+			} : null
+		},
+		"draw-end": {
+			prop: "onDrawEnd",
+			watch: () => [],
+			detail: () => ({
+				paths: [],
+				currentPath: null
+			}),
+			select: (event, _before, after) => event.type === "POINTER_UP" || event.type === "CLEAR" ? {
+				paths: [...after.paths],
+				currentPath: after.currentPath
+			} : null
+		}
+	}
+};
+const signaturePad = defineComponent(def);
+export { def, signaturePad };
+
+//# sourceMappingURL=signature-pad.presentation.js.map

package/dist/signature-pad/signature-pad.state.d.ts

@@ -0,0 +1,40 @@
+export interface SignaturePoint {
+  readonly x: number;
+  readonly y: number;
+  readonly pressure: number;
+}
+export interface DrawingTuning {
+  readonly size: number;
+  readonly simulatePressure: boolean;
+  readonly thinning: number;
+  readonly smoothing: number;
+  readonly streamline: number;
+}
+export declare const defaultTuning: DrawingTuning;
+export interface SignaturePadContext {
+  paths: string[];
+  currentPoints: SignaturePoint[];
+  currentPath: string | null;
+  disabled: boolean;
+  readOnly: boolean;
+  tuning: DrawingTuning;
+  drawing: unknown;
+  dir: "ltr" | "rtl";
+}
+export interface SignaturePadArgs {
+  paths?: string | readonly string[];
+  disabled?: boolean;
+  readOnly?: boolean;
+  drawing?: unknown;
+  defaultReadOnly?: boolean;
+  dir?: string;
+}
+export type SignaturePadState = "idle" | "drawing";
+export declare function pathsOf(value: unknown): string[];
+export declare function tuningOf(value: unknown): Partial<DrawingTuning>;
+export declare function svgPathFromStroke(points: readonly (readonly number[])[], closed?: boolean): string;
+export declare function strokePath(points: readonly SignaturePoint[], tuning: DrawingTuning): string;
+export declare function isInteractive(ctx: SignaturePadContext): boolean;
+export declare function isEmpty(ctx: SignaturePadContext): boolean;
+export declare function initial(args: SignaturePadArgs, authored: (name: string) => boolean): SignaturePadContext;
+//# sourceMappingURL=signature-pad.state.d.ts.map

package/dist/signature-pad/signature-pad.state.js

@@ -0,0 +1,94 @@
+import { defaultTwin } from "@spinjs/runtime";
+import { getStroke } from "perfect-freehand";
+// src/signature-pad/signature-pad.state.ts
+const defaultTuning = {
+	size: 2,
+	simulatePressure: false,
+	thinning: .7,
+	smoothing: .4,
+	streamline: .6
+};
+function pathsOf(value) {
+	if (Array.isArray(value)) return value.every((item) => typeof item === "string") ? [...value] : [];
+	if (typeof value !== "string" || value.length === 0) return [];
+	try {
+		const parsed = JSON.parse(value);
+		return Array.isArray(parsed) && parsed.every((item) => typeof item === "string") ? [...parsed] : [];
+	} catch {
+		return [];
+	}
+}
+function tuningOf(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return {};
+	const bag = { ...value };
+	const count = (field) => typeof field === "number" && Number.isFinite(field) ? field : null;
+	const size = count(bag["size"]);
+	const thinning = count(bag["thinning"]);
+	const smoothing = count(bag["smoothing"]);
+	const streamline = count(bag["streamline"]);
+	const simulate = bag["simulatePressure"];
+	return {
+		...size === null ? {} : { size },
+		...thinning === null ? {} : { thinning },
+		...smoothing === null ? {} : { smoothing },
+		...streamline === null ? {} : { streamline },
+		...typeof simulate === "boolean" ? { simulatePressure: simulate } : {}
+	};
+}
+function svgPathFromStroke(points, closed = true) {
+	const len = points.length;
+	if (len < 4) return "";
+	const average = (a, b) => (a + b) / 2;
+	const ax = points[0]?.[0] ?? 0;
+	const ay = points[0]?.[1] ?? 0;
+	const bx = points[1]?.[0] ?? 0;
+	const by = points[1]?.[1] ?? 0;
+	const cx = points[2]?.[0] ?? 0;
+	const cy = points[2]?.[1] ?? 0;
+	let result = `M${ax.toFixed(2)},${ay.toFixed(2)} Q${bx.toFixed(2)},${by.toFixed(2)} ${average(bx, cx).toFixed(2)},${average(by, cy).toFixed(2)} T`;
+	for (let i = 2, max = len - 1; i < max; i += 1) {
+		const a = points[i] ?? [0, 0];
+		const b = points[i + 1] ?? [0, 0];
+		result += `${average(a[0] ?? 0, b[0] ?? 0).toFixed(2)},${average(a[1] ?? 0, b[1] ?? 0).toFixed(2)} `;
+	}
+	if (closed) result += "Z";
+	return result;
+}
+function strokePath(points, tuning) {
+	return svgPathFromStroke(getStroke(points.map((p) => ({
+		x: p.x,
+		y: p.y,
+		pressure: p.pressure
+	})), {
+		size: tuning.size,
+		simulatePressure: tuning.simulatePressure,
+		thinning: tuning.thinning,
+		smoothing: tuning.smoothing,
+		streamline: tuning.streamline
+	}));
+}
+function isInteractive(ctx) {
+	return !ctx.disabled && !ctx.readOnly;
+}
+function isEmpty(ctx) {
+	return ctx.paths.length === 0;
+}
+function initial(args, authored) {
+	const written = (field) => authored(field) || authored(defaultTwin(field)) || args[defaultTwin(field)] !== void 0;
+	return {
+		paths: written("paths") ? pathsOf(args.paths) : [],
+		currentPoints: [],
+		currentPath: null,
+		disabled: args.disabled === true,
+		readOnly: args.readOnly === true,
+		tuning: {
+			...defaultTuning,
+			...tuningOf(args.drawing)
+		},
+		drawing: args.drawing,
+		dir: args.dir === "rtl" ? "rtl" : "ltr"
+	};
+}
+export { defaultTuning, initial, isEmpty, isInteractive, pathsOf, strokePath, svgPathFromStroke, tuningOf };
+
+//# sourceMappingURL=signature-pad.state.js.map

package/dist/signature-pad/signature-pad.transitions.d.ts

@@ -0,0 +1,12 @@
+import { SignaturePadContext } from "./signature-pad.state.js";
+import { SignaturePadEvents } from "./signature-pad.events.js";
+import { AssignFor } from "@spinjs/runtime/fsm";
+type SignaturePadAssign<K extends keyof SignaturePadEvents = keyof SignaturePadEvents> = AssignFor<SignaturePadContext, SignaturePadEvents, K>;
+export declare const clear: SignaturePadAssign<"CLEAR">;
+export declare const setPaths: SignaturePadAssign<"SET_PATHS">;
+export declare const setTuning: SignaturePadAssign<"SET_TUNING">;
+export declare const pointerDown: SignaturePadAssign<"POINTER_DOWN">;
+export declare const pointerMove: SignaturePadAssign<"POINTER_MOVE">;
+export declare const pointerUp: SignaturePadAssign<"POINTER_UP">;
+export {};
+//# sourceMappingURL=signature-pad.transitions.d.ts.map

package/dist/signature-pad/signature-pad.transitions.js

@@ -0,0 +1,40 @@
+import { pathsOf, strokePath } from "./signature-pad.state.js";
+// src/signature-pad/signature-pad.transitions.ts
+const clear = () => ({
+	paths: [],
+	currentPoints: [],
+	currentPath: null
+});
+const setPaths = (_ctx, event) => ({ paths: pathsOf(event.paths) });
+const setTuning = (ctx, event) => ({ tuning: {
+	...ctx.tuning,
+	...event.tuning
+} });
+const pointerDown = (ctx, event) => {
+	const currentPoints = [event.point];
+	return {
+		currentPoints,
+		currentPath: strokePath(currentPoints, ctx.tuning)
+	};
+};
+const pointerMove = (ctx, event) => {
+	const currentPoints = [...ctx.currentPoints, event.point];
+	return {
+		currentPoints,
+		currentPath: strokePath(currentPoints, ctx.tuning)
+	};
+};
+const pointerUp = (ctx) => {
+	if (ctx.currentPath === null) return {
+		currentPoints: [],
+		currentPath: null
+	};
+	return {
+		paths: [...ctx.paths, ctx.currentPath],
+		currentPoints: [],
+		currentPath: null
+	};
+};
+export { clear, pointerDown, pointerMove, pointerUp, setPaths, setTuning };
+
+//# sourceMappingURL=signature-pad.transitions.js.map

package/dist/slider/examples/basic.html

@@ -0,0 +1,32 @@
+<script lang="ts">
+import { slider } from "../slider.presentation.js";
+
+const machine = slider({ value: [50] });
+</script>
+
+<div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
+  <div
+    class={["mb-4 text-sm text-text-muted", { "text-primary": machine.state === "focus" }]}
+    {...machine.getValueTextProps()}>{machine.valueText}</div>
+  <div
+    class="relative flex h-4 w-full touch-none items-center select-none"
+    {...machine.getControlProps()}
+  >
+    <div
+      class="relative h-2 w-full overflow-hidden rounded-full bg-surface-sunken"
+      {...machine.getTrackProps()}
+    >
+      <div
+        class="absolute inset-y-0 rounded-full bg-primary"
+        {...machine.getRangeProps()}
+      ></div>
+    </div>
+    <template for={machine.getThumbIndexes()} as={row} key={row}>
+      <span
+        class={["bare absolute top-1/2 -mt-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface", { "ring-2 ring-border-strong": machine.state === "focus" && machine.focusedIndex === row, "scale-110": machine.state === "dragging" && machine.focusedIndex === row, "opacity-50": machine.disabled }]}
+        {...machine.getThumbProps(row)}
+      ></span>
+      <input {...machine.getHiddenInputProps(row)} />
+    </template>
+  </div>
+</div>

package/dist/slider/examples/equalizer.html

@@ -0,0 +1,119 @@
+<script lang="ts">
+import { slider } from "../slider.presentation.js";
+
+const sub = slider({ value: [70], orientation: "vertical" });
+const low = slider({ value: [55], orientation: "vertical" });
+const mid = slider({ value: [45], orientation: "vertical" });
+const high = slider({ value: [65], orientation: "vertical" });
+const air = slider({ value: [80], orientation: "vertical" });
+</script>
+
+<div
+  class="mx-auto w-full max-w-md rounded-lg border border-solid border-border bg-surface-raised p-4">
+  <div class="mb-3 flex items-center justify-between">
+    <span class="text-sm font-semibold text-text">5-Band Equalizer</span>
+    <span class="text-xs text-text-muted">Studio Preset</span>
+  </div>
+  <div class="grid grid-cols-5 gap-4">
+    <div class="flex flex-col items-center gap-2" {...sub.getRootProps()}>
+      <span class="font-mono text-xs text-text-muted">{sub.getThumbValue(0)}</span>
+      <div
+        class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
+        {...sub.getControlProps()}>
+        <div
+          class="relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken"
+          {...sub.getTrackProps()}>
+          <div class="absolute inset-x-0 rounded-full bg-primary"
+            {...sub.getRangeProps()}></div>
+        </div>
+        <template for={sub.getThumbIndexes()} as={row} key={row}>
+          <span
+            class="absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface"
+            {...sub.getThumbProps(row)}></span>
+          <input {...sub.getHiddenInputProps(row)} />
+        </template>
+      </div>
+      <span class="text-xs text-text-muted" {...sub.getLabelProps()}>60Hz</span>
+    </div>
+    <div class="flex flex-col items-center gap-2" {...low.getRootProps()}>
+      <span class="font-mono text-xs text-text-muted">{low.getThumbValue(0)}</span>
+      <div
+        class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
+        {...low.getControlProps()}>
+        <div
+          class="relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken"
+          {...low.getTrackProps()}>
+          <div class="absolute inset-x-0 rounded-full bg-primary"
+            {...low.getRangeProps()}></div>
+        </div>
+        <template for={low.getThumbIndexes()} as={row} key={row}>
+          <span
+            class="absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface"
+            {...low.getThumbProps(row)}></span>
+          <input {...low.getHiddenInputProps(row)} />
+        </template>
+      </div>
+      <span class="text-xs text-text-muted" {...low.getLabelProps()}>250Hz</span>
+    </div>
+    <div class="flex flex-col items-center gap-2" {...mid.getRootProps()}>
+      <span class="font-mono text-xs text-text-muted">{mid.getThumbValue(0)}</span>
+      <div
+        class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
+        {...mid.getControlProps()}>
+        <div
+          class="relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken"
+          {...mid.getTrackProps()}>
+          <div class="absolute inset-x-0 rounded-full bg-primary"
+            {...mid.getRangeProps()}></div>
+        </div>
+        <template for={mid.getThumbIndexes()} as={row} key={row}>
+          <span
+            class="absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface"
+            {...mid.getThumbProps(row)}></span>
+          <input {...mid.getHiddenInputProps(row)} />
+        </template>
+      </div>
+      <span class="text-xs text-text-muted" {...mid.getLabelProps()}>1kHz</span>
+    </div>
+    <div class="flex flex-col items-center gap-2" {...high.getRootProps()}>
+      <span class="font-mono text-xs text-text-muted">{high.getThumbValue(0)}</span>
+      <div
+        class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
+        {...high.getControlProps()}>
+        <div
+          class="relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken"
+          {...high.getTrackProps()}>
+          <div class="absolute inset-x-0 rounded-full bg-primary"
+            {...high.getRangeProps()}></div>
+        </div>
+        <template for={high.getThumbIndexes()} as={row} key={row}>
+          <span
+            class="absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface"
+            {...high.getThumbProps(row)}></span>
+          <input {...high.getHiddenInputProps(row)} />
+        </template>
+      </div>
+      <span class="text-xs text-text-muted" {...high.getLabelProps()}>4kHz</span>
+    </div>
+    <div class="flex flex-col items-center gap-2" {...air.getRootProps()}>
+      <span class="font-mono text-xs text-text-muted">{air.getThumbValue(0)}</span>
+      <div
+        class="relative flex h-36 w-4 touch-none flex-col items-center select-none"
+        {...air.getControlProps()}>
+        <div
+          class="relative w-2 flex-1 overflow-hidden rounded-full bg-surface-sunken"
+          {...air.getTrackProps()}>
+          <div class="absolute inset-x-0 rounded-full bg-primary"
+            {...air.getRangeProps()}></div>
+        </div>
+        <template for={air.getThumbIndexes()} as={row} key={row}>
+          <span
+            class="absolute left-1/2 -mb-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface"
+            {...air.getThumbProps(row)}></span>
+          <input {...air.getHiddenInputProps(row)} />
+        </template>
+      </div>
+      <span class="text-xs text-text-muted" {...air.getLabelProps()}>16kHz</span>
+    </div>
+  </div>
+</div>

package/dist/slider/examples/fractional.html

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { slider } from "../slider.presentation.js";
+
+const machine = slider({ value: [7.5], min: 5, max: 10, step: 0.01 });
+</script>
+
+<include file="./basic.html" />

package/dist/slider/examples/marks.html

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { slider } from "../slider.presentation.js";
+
+const machine = slider({ value: [50], markers: [0, 25, 50, 75, 100] });
+</script>
+
+<div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
+  <div class="mb-4 text-sm text-text-muted"
+    {...machine.getValueTextProps()}>{machine.valueText}</div>
+  <div
+    class="relative flex h-4 w-full touch-none items-center select-none"
+    {...machine.getControlProps()}
+  >
+    <div
+      class="relative h-2 w-full overflow-hidden rounded-full bg-surface-sunken"
+      {...machine.getTrackProps()}
+    >
+      <div
+        class="absolute inset-y-0 rounded-full bg-primary"
+        {...machine.getRangeProps()}
+      ></div>
+    </div>
+    <template for={machine.getThumbIndexes()} as={row} key={row}>
+      <span
+        class={["bare absolute top-1/2 -mt-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface", { "ring-2 ring-border-strong": machine.state === "focus" && machine.focusedIndex === row, "scale-110": machine.state === "dragging" && machine.focusedIndex === row, "opacity-50": machine.disabled }]}
+        {...machine.getThumbProps(row)}
+      ></span>
+      <input {...machine.getHiddenInputProps(row)} />
+    </template>
+  </div>
+  <div class="relative mt-2 h-8" {...machine.getMarkerGroupProps()}>
+    <template for={machine.getMarkers()} as={row} key={row}>
+      <span
+        class="absolute top-0 flex w-0 justify-center pt-4 text-xs text-text-muted"
+        {...machine.getMarkerProps(row)}
+      >
+        <span class={["absolute left-1/2 top-0 ml-0 h-1 w-1 rounded-full bg-border-strong", { "bg-primary": row < (machine.value[0] ?? 0) }]} aria-hidden="true"></span>
+        {row}
+      </span>
+    </template>
+  </div>
+</div>

package/dist/slider/examples/range.html

@@ -0,0 +1,31 @@
+<script lang="ts">
+import { slider } from "../slider.presentation.js";
+
+const machine = slider({ value: [20, 80] });
+</script>
+
+<div class="mx-auto w-full max-w-md" {...machine.getRootProps()}>
+  <div class="mb-4 text-sm text-text-muted"
+    {...machine.getValueTextProps()}>{machine.getThumbValue(0)} - {machine.getThumbValue(1)}</div>
+  <div
+    class="relative flex h-4 w-full touch-none items-center select-none"
+    {...machine.getControlProps()}
+  >
+    <div
+      class="relative h-2 w-full overflow-hidden rounded-full bg-surface-sunken"
+      {...machine.getTrackProps()}
+    >
+      <div
+        class="absolute inset-y-0 rounded-full bg-primary"
+        {...machine.getRangeProps()}
+      ></div>
+    </div>
+    <template for={machine.getThumbIndexes()} as={row} key={row}>
+      <span
+        class={["bare absolute top-1/2 -mt-2 -ml-2 h-4 w-4 rounded-full border-2 border-solid border-primary bg-surface", { "ring-2 ring-border-strong": machine.state === "focus" && machine.focusedIndex === row, "scale-110": machine.state === "dragging" && machine.focusedIndex === row, "opacity-50": machine.disabled }]}
+        {...machine.getThumbProps(row)}
+      ></span>
+      <input {...machine.getHiddenInputProps(row)} />
+    </template>
+  </div>
+</div>

package/dist/slider/examples/stepped.html

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { slider } from "../slider.presentation.js";
+
+const machine = slider({ value: [50], step: 5 });
+</script>
+
+<include file="./basic.html" />