"use client"; import { useId, useMemo, useState } from "react"; import type { HTMLAttributes } from "react"; export type RangeValue = [number, number]; export type RangeSliderDualProps = Omit, "onChange" | "defaultValue"> & { label: string; min?: number; max?: number; step?: number; value?: RangeValue; defaultValue?: RangeValue; onValueChange?: (value: RangeValue) => void; /** Smallest allowed distance between both handles. */ minGap?: number; /** Intl.NumberFormat options used for visible values and aria-valuetext. */ format?: Intl.NumberFormatOptions; locale?: string; minLabel?: string; maxLabel?: string; nameMin?: string; nameMax?: string; description?: string; disabled?: boolean; }; function cx(...values: Array) { return values.filter(Boolean).join(" "); } const thumb = "pointer-events-none absolute inset-0 h-11 w-full appearance-none bg-transparent outline-none disabled:cursor-not-allowed " + "[&::-webkit-slider-runnable-track]:h-11 [&::-webkit-slider-runnable-track]:bg-transparent " + "[&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[10px] [&::-webkit-slider-thumb]:size-6 [&::-webkit-slider-thumb]:cursor-grab [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-[#1E6B64] [&::-webkit-slider-thumb]:bg-[#FBFBF8] [&::-webkit-slider-thumb]:shadow-[0_1px_2px_rgba(29,33,31,0.25)] " + "[&::-moz-range-track]:bg-transparent [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:cursor-grab [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-[#1E6B64] [&::-moz-range-thumb]:bg-[#FBFBF8] " + "focus-visible:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-[#1E6B64]/30 focus-visible:[&::-moz-range-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-[#1E6B64]/30 " + "dark:[&::-webkit-slider-thumb]:border-[#7FC4BA] dark:[&::-webkit-slider-thumb]:bg-[#151918] dark:[&::-moz-range-thumb]:border-[#7FC4BA] dark:[&::-moz-range-thumb]:bg-[#151918] dark:focus-visible:[&::-webkit-slider-thumb]:ring-[#7FC4BA]/35"; export function RangeSliderDual({ label, min = 0, max = 100, step = 1, value, defaultValue, onValueChange, minGap = 0, format, locale, minLabel = "Minimum", maxLabel = "Maximum", nameMin, nameMax, description, disabled, className, ...props }: RangeSliderDualProps) { const id = useId(); const labelId = id + "-label"; const lowId = id + "-low"; const highId = id + "-high"; const descriptionId = id + "-description"; const [inner, setInner] = useState(defaultValue ?? [min, max]); const [low, high] = value ?? inner; const formatter = useMemo(() => new Intl.NumberFormat(locale, format), [locale, format]); const commit = (next: RangeValue) => { if (value === undefined) setInner(next); onValueChange?.(next); }; const span = max - min || 1; const lowPercent = ((low - min) / span) * 100; const highPercent = ((high - min) / span) * 100; const lowOnTop = low > max - span * 0.1; // ICU versions differ on thin spaces around the range dash (Node vs browsers); normalize so SSR and hydration agree. const range = (formatter.formatRange ? formatter.formatRange(low, high) : formatter.format(low) + " to " + formatter.format(high)).replace(/[\u2009\u202F]/g, " "); return (

{label} {range}

{description ? (

{description}

) : null}

); }