"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

export interface RangeSliderProps
  extends Omit<
    React.HTMLAttributes<HTMLDivElement>,
    "onChange" | "defaultValue" | "value"
  > {
  value?: [number, number];
  defaultValue?: [number, number];
  onChange?: (value: [number, number]) => void;
  min?: number;
  max?: number;
  step?: number;
  label?: string;
  minLabel?: string;
  maxLabel?: string;
  showValues?: boolean;
}

const clamp = (value: number, min: number, max: number) =>
  Math.min(max, Math.max(min, value));

const roundToStep = (value: number, step: number) =>
  Math.round(value / step) * step;

export const RangeSlider = React.forwardRef<HTMLDivElement, RangeSliderProps>(
  (
    {
      className,
      value,
      defaultValue,
      onChange,
      min = 0,
      max = 100,
      step = 1,
      label,
      minLabel = "Minimum",
      maxLabel = "Maximum",
      showValues = true,
      ...props
    },
    ref
  ) => {
    const isControlled = value !== undefined;
    const [internalValue, setInternalValue] = React.useState<[number, number]>(
      defaultValue ?? [min, max]
    );
    const [activeThumb, setActiveThumb] = React.useState<"min" | "max" | null>(
      null
    );
    const trackRef = React.useRef<HTMLDivElement | null>(null);

    const currentValue = isControlled ? value ?? [min, max] : internalValue;
    const [minValue, maxValue] = currentValue;

    const updateValue = React.useCallback(
      (next: [number, number]) => {
        if (!isControlled) {
          setInternalValue(next);
        }
        onChange?.(next);
      },
      [isControlled, onChange]
    );

    const getValueFromPointer = React.useCallback(
      (clientX: number) => {
        if (!trackRef.current) return min;
        const rect = trackRef.current.getBoundingClientRect();
        const percent = clamp((clientX - rect.left) / rect.width, 0, 1);
        const rawValue = min + percent * (max - min);
        return clamp(roundToStep(rawValue, step), min, max);
      },
      [min, max, step]
    );

    const handlePointerDown = (
      event: React.PointerEvent<HTMLButtonElement>,
      thumb: "min" | "max"
    ) => {
      event.preventDefault();
      setActiveThumb(thumb);
      (event.currentTarget as HTMLButtonElement).setPointerCapture(
        event.pointerId
      );
    };

    const handlePointerMove = React.useCallback(
      (event: PointerEvent) => {
        if (!activeThumb) return;
        const nextValue = getValueFromPointer(event.clientX);
        if (activeThumb === "min") {
          const nextMin = Math.min(nextValue, maxValue);
          updateValue([nextMin, maxValue]);
        } else {
          const nextMax = Math.max(nextValue, minValue);
          updateValue([minValue, nextMax]);
        }
      },
      [activeThumb, maxValue, minValue, getValueFromPointer, updateValue]
    );

    const handlePointerUp = React.useCallback(() => {
      setActiveThumb(null);
    }, []);

    React.useEffect(() => {
      if (!activeThumb) return;
      window.addEventListener("pointermove", handlePointerMove);
      window.addEventListener("pointerup", handlePointerUp);

      return () => {
        window.removeEventListener("pointermove", handlePointerMove);
        window.removeEventListener("pointerup", handlePointerUp);
      };
    }, [activeThumb, handlePointerMove, handlePointerUp]);

    const handleKeyDown = (
      event: React.KeyboardEvent<HTMLButtonElement>,
      thumb: "min" | "max"
    ) => {
      const increment = step;
      if (["ArrowRight", "ArrowUp"].includes(event.key)) {
        event.preventDefault();
        if (thumb === "min") {
          updateValue([clamp(minValue + increment, min, maxValue), maxValue]);
        } else {
          updateValue([minValue, clamp(maxValue + increment, minValue, max)]);
        }
      }
      if (["ArrowLeft", "ArrowDown"].includes(event.key)) {
        event.preventDefault();
        if (thumb === "min") {
          updateValue([clamp(minValue - increment, min, maxValue), maxValue]);
        } else {
          updateValue([minValue, clamp(maxValue - increment, minValue, max)]);
        }
      }
      if (event.key === "Home") {
        event.preventDefault();
        if (thumb === "min") {
          updateValue([min, maxValue]);
        } else {
          updateValue([minValue, minValue]);
        }
      }
      if (event.key === "End") {
        event.preventDefault();
        if (thumb === "min") {
          updateValue([maxValue, maxValue]);
        } else {
          updateValue([minValue, max]);
        }
      }
    };

    const minPercent = ((minValue - min) / (max - min)) * 100;
    const maxPercent = ((maxValue - min) / (max - min)) * 100;

    return (
      <div ref={ref} className={cn("w-full space-y-3", className)} {...props}>
        {label ? (
          <p className="text-sm font-semibold text-foreground">{label}</p>
        ) : null}
        <div className="flex items-center justify-between text-xs text-muted-foreground">
          <span>{minLabel}</span>
          <span>{maxLabel}</span>
        </div>
        {showValues ? (
          <div className="flex items-center justify-between text-sm text-foreground">
            <span>{minValue}</span>
            <span>{maxValue}</span>
          </div>
        ) : null}
        <div className="relative h-10">
          <div
            ref={trackRef}
            className="absolute top-1/2 h-2 w-full -translate-y-1/2 rounded-full bg-muted"
            onPointerDown={(event) => {
              const nextValue = getValueFromPointer(event.clientX);
              const distanceToMin = Math.abs(nextValue - minValue);
              const distanceToMax = Math.abs(nextValue - maxValue);
              if (distanceToMin <= distanceToMax) {
                updateValue([Math.min(nextValue, maxValue), maxValue]);
              } else {
                updateValue([minValue, Math.max(nextValue, minValue)]);
              }
            }}
          />
          <div
            className="absolute top-1/2 h-2 -translate-y-1/2 rounded-full bg-card"
            style={{ left: `${minPercent}%`, right: `${100 - maxPercent}%` }}
          />
          <button
            type="button"
            aria-label="Minimum value"
            className={cn(
              "absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm",
              "focus-visible:outline-none focus-visible:bg-muted"
            )}
            style={{ left: `${minPercent}%`, transform: "translate(-50%, -50%)" }}
            onPointerDown={(event) => handlePointerDown(event, "min")}
            onKeyDown={(event) => handleKeyDown(event, "min")}
          />
          <button
            type="button"
            aria-label="Maximum value"
            className={cn(
              "absolute top-1/2 h-4 w-4 -translate-y-1/2 rounded-full border border-border bg-background shadow-sm",
              "focus-visible:outline-none focus-visible:bg-muted"
            )}
            style={{ left: `${maxPercent}%`, transform: "translate(-50%, -50%)" }}
            onPointerDown={(event) => handlePointerDown(event, "max")}
            onKeyDown={(event) => handleKeyDown(event, "max")}
          />
        </div>
      </div>
    );
  }
);

RangeSlider.displayName = "RangeSlider";
Range Slider

Dependencies

Files

Installation
