"use client"; import { Slider as BaseSlider } from "@base-ui/react/slider"; import { useMemo, useState, type ComponentProps, type ReactNode } from "react"; import { cn } from "@/lib/cn"; import { useControllableState } from "@/lib/use-controllable-state"; type Size = "sm" | "md" | "lg"; export type SliderMark = number | { value: number; label?: ReactNode }; export type SliderProps = Omit< ComponentProps, "value" | "defaultValue" | "onValueChange" | "onValueCommitted" | "children" | "className" | "render" | "largeStep" | "orientation" | "thumbAlignment" > & { value?: number; defaultValue?: number; onValueChange?: (value: number) => void; /** Fires once when a drag ends, a key is released or the track is pressed. Save here, not on every change. */ onValueCommitted?: (value: number) => void; /** Visible label above the track. Without one, pass aria-label. */ label?: ReactNode; /** Show the formatted value opposite the label. */ showValue?: boolean; /** Step taken with Shift+Arrow and Page Up/Down. Defaults to 10 steps. */ largeStep?: number; /** Dots on the track; give them a label to print it underneath (pressing a label jumps there). */ marks?: SliderMark[]; /** The value bubble over the thumb: while dragging or keyboard focused, always, or never. */ tooltip?: "auto" | "always" | "never"; /** Turns the number into the text shown in the readout, the bubble and to screen readers. */ formatValue?: (value: number) => string; size?: Size; className?: string; }; // Track thickness, thumb diameter and control height per size. The control is // taller than the track so the whole band is a comfortable press target. const sizes: Record = { sm: { control: "h-5", track: "h-1", thumb: "size-3" }, md: { control: "h-6", track: "h-1", thumb: "size-4" }, lg: { control: "h-7", track: "h-1.5", thumb: "size-5" }, }; const pct = (v: number, min: number, max: number) => ((v - min) / (max - min)) * 100; export function Slider({ value: valueProp, defaultValue, onValueChange, onValueCommitted, label, showValue = false, min = 0, max = 100, step = 1, largeStep, marks, tooltip = "auto", formatValue, format, locale, size = "md", disabled, className, "aria-label": ariaLabel, ...rest }: SliderProps) { const [value, setValue] = useControllableState({ value: valueProp, defaultValue: defaultValue ?? min, onChange: onValueChange, }); // "glide" lets the thumb travel to a pressed point or a pressed label; drags and // keys switch it off so the thumb stays glued to the pointer and to each keystroke. const [motion, setMotion] = useState<"glide" | "instant">("glide"); const fmt = useMemo(() => { if (formatValue) return formatValue; const nf = new Intl.NumberFormat(locale, format); return (v: number) => nf.format(v); }, [formatValue, format, locale]); const s = sizes[size]; const p = pct(value, min, max); const list = (marks ?? []).map((m) => (typeof m === "number" ? { value: m, label: undefined } : m)); const labeled = list.some((m) => m.label != null); return ( { setMotion(details.reason === "track-press" ? "glide" : "instant"); setValue(next as number); }} onValueCommitted={(next, details) => { if (details.reason === "drag") setMotion("glide"); onValueCommitted?.(next as number); }} data-size={size} data-motion={motion} data-tooltip={tooltip} className={cn("group/slider flex w-full flex-col gap-2 data-disabled:opacity-50", className)} {...rest} > {(label != null || showValue) && (

{label != null && {label}} {showValue && ( {fmt(value)} )}

)} {/* The fill is ours rather than Base UI's so it can glide with the thumb. */}

{list.map((m) => { const at = pct(m.value, min, max); // A dot on the rounded cap reads as a smudge; the label still marks the end. if (at <= 0 || at >= 100) return null; return ( ); })} fmt(v)} className={cn( "group/thumb outline-none", // A 44px press target around a thumb that draws at 12–20px. "before:absolute before:-inset-3.5 before:content-['']", "group-data-[motion=glide]/slider:transition-[inset-inline-start] group-data-[motion=glide]/slider:duration-200 group-data-[motion=glide]/slider:ease-out-expo", s.thumb, )} > {tooltip !== "never" && ( {fmt(value)} )} {labeled && ( // Pointer shortcut only: the thumb already covers every value from the keyboard.

{list.map((m) => m.label == null ? null : ( ), )}

)} ); }