"use client";

import * as React from "react";

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

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

const buildMarks = (min: number, max: number, step: number) => {
  const marks: number[] = [];
  for (let current = min; current <= max; current += step) {
    marks.push(current);
  }
  return marks;
};

export function SliderMarks({
  value,
  defaultValue = 50,
  onChange,
  min = 0,
  max = 100,
  step = 1,
  markStep = 25,
  marks,
  label,
  showValue = true,
  className,
  ...props
}: SliderMarksProps) {
  const isControlled = value !== undefined;
  const [internalValue, setInternalValue] = React.useState(defaultValue);
  const currentValue = isControlled ? value ?? defaultValue : internalValue;
  const resolvedMarks = marks ?? buildMarks(min, max, markStep);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const nextValue = Number(event.target.value);
    if (!isControlled) {
      setInternalValue(nextValue);
    }
    onChange?.(nextValue);
  };

  return (
    <div className={cn("w-full max-w-lg space-y-3", className)} {...props}>
      <div className="flex items-center justify-between text-sm">
        {label ? <span className="text-foreground">{label}</span> : <span />}
        {showValue ? (
          <span className="text-primary">{currentValue}</span>
        ) : null}
      </div>
      <input
        type="range"
        min={min}
        max={max}
        step={step}
        value={currentValue}
        onChange={handleChange}
        className="w-full"
        style={{ accentColor: "var(--text-primary)" }}
      />
      <div className="flex w-full items-start justify-between">
        {resolvedMarks.map((mark) => (
          <div key={mark} className="flex flex-col items-center">
            <span className="h-2 border-l border-border" />
            <span className="mt-1 text-xs text-muted-foreground">{mark}</span>
          </div>
        ))}
      </div>
    </div>
  );
}
Slider Marks

Dependencies

Files

Installation
