Slider

1// Base UI base slider — TRANSCRIBED from upstream's `bases/base-ui/ui/slider.tsx`
2// (maintainer-supplied). Structure, part tree and class strings follow that source.
3//
4// THE PART TREE IS NOT THE RADIX ONE:
5//
6//     radix     Root >           Track > Range,       Thumb a SIBLING of Track (under Root)
7//     Base UI   Root > Control > Track > Indicator,   Thumb a SIBLING of Track (under Control)
8//
9// The thumb sits OUTSIDE the track in both. That matters: the track carries `overflow-hidden` —
10// which is what gives the fill its rounded ends — and is only `h-1` tall, so a round thumb nested
11// inside it is clipped to a 4px sliver that reads as a missing thumb. Base UI positions the thumb
12// from slider context rather than from its DOM parent (`inset-inline-start: <pct>` plus a
13// centering `translate`), so Control is the box those percentages resolve against.
14//
15// ONE DEPARTURE FROM THE SOURCE, AND IT IS DELIBERATE: upstream writes its orientation variants as
16// `data-horizontal:` / `data-vertical:`. No primitive in @octanejs/base-ui emits those attributes —
17// this one publishes `data-orientation="horizontal" | "vertical"` on Root, Control, Track,
18// Indicator and Thumb (verified by rendering it), so the variants are written as
19// `data-[orientation=…]:` instead. Copied verbatim, upstream's spelling would match nothing and the
20// track would render with no height at all: an invisible rail. Whether the primitive should be
21// emitting the newer attribute names is a question about @octanejs/base-ui, not about this file.
22//
23// `thumbAlignment="edge"` is forwarded as upstream does: it insets the thumb so the two extremes
24// sit flush with the ends of the track instead of overhanging them.
25//
26// Thumbs are composed with createElement for the same reason as the radix base: one per entry of
27// `_values`, and mapped descriptors are octane's channel for computed children.
28import { createElement, useMemo } from 'octane';
29import { Slider as SliderPrimitive } from '@octanejs/base-ui/slider';
30 
31import { cn } from '@/lib/utils';
32 
33export interface SliderProps extends Record<string, unknown> {
34	className?: string;
35	defaultValue?: number | number[];
36	value?: number | number[];
37	min?: number;
38	max?: number;
39}
40 
41export function Slider({
42	className,
43	defaultValue,
44	value,
45	min = 0,
46	max = 100,
47	...props
48}: SliderProps) {
49	// This drives HOW MANY THUMBS get rendered, so a value shape it fails to recognise is a visible
50	// bug rather than a type nicety.
51	//
52// … truncated