"use client";

import * as React from "react";
import * as SliderPrimitive from "@radix-ui/react-slider";

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

export interface SliderRangeProps
  extends Omit<
    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,
    "className"
  > {
  className?: string;
  label?: string;
  minLabel?: string;
  maxLabel?: string;
  showValues?: boolean;
}

export function SliderRange({
  className,
  label,
  min = 0,
  max = 100,
  minLabel = "Minimum",
  maxLabel = "Maximum",
  showValues = true,
  value,
  defaultValue,
  ...props
}: SliderRangeProps) {
  const values = React.useMemo(() => {
    if (Array.isArray(value)) {
      return value;
    }
    if (Array.isArray(defaultValue)) {
      return defaultValue;
    }
    return [min, max];
  }, [value, defaultValue, min, max]);

  return (
    <div className={cn("w-full space-y-3", className)}>
      {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>{values[0]}</span>
          <span>{values[1]}</span>
        </div>
      ) : null}
      <SliderPrimitive.Root
        data-slot="slider-range"
        defaultValue={defaultValue}
        value={value}
        min={min}
        max={max}
        className="relative flex w-full touch-none select-none items-center data-[disabled]:opacity-50"
        {...props}
      >
        <SliderPrimitive.Track
          data-slot="slider-range-track"
          className="relative h-2 w-full grow overflow-hidden rounded-full bg-muted"
        >
          <SliderPrimitive.Range
            data-slot="slider-range-range"
            className="absolute h-full rounded-full bg-accent"
          />
        </SliderPrimitive.Track>
        {values.map((_, index) => (
          <SliderPrimitive.Thumb
            data-slot="slider-range-thumb"
            key={index}
            className="block h-4 w-4 rounded-full border border-border bg-background shadow-sm transition focus-visible:outline-none focus-visible:bg-muted"
          />
        ))}
      </SliderPrimitive.Root>
    </div>
  );
}
Slider Range

Dependencies

Files

Installation
