Slider With Ticks

import Cmp from "@/registry/origin-ui/comp-246";

export default function Demo() {
  return <Cmp />;
}

import { cn } from "@/lib/utils";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";

export default function Component() {
  const max = 12;
  const skipInterval = 2; // Set to 1 to allow no text skipping
  const ticks = [...Array(max + 1)].map((_, i) => i);

  return (
    <div className="*:not-first:mt-4">
      <Label>Slider with ticks</Label>
      <div>
        <Slider aria-label="Slider with ticks" defaultValue={[5]} max={max} />
        <span
          aria-hidden="true"
          className="mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs"
        >
          {ticks.map((_, i) => (
            <span
              className="flex w-0 flex-col items-center justify-center gap-2"
              key={String(i)}
            >
              <span
                className={cn(
                  "h-1 w-px bg-muted-foreground/70",
                  i % skipInterval !== 0 && "h-0.5",
                )}
              />
              <span className={cn(i % skipInterval !== 0 && "opacity-0")}>
                {i}
              </span>
            </span>
          ))}
        </span>
      </div>
    </div>
  );
}