Marks Slider

A styled range slider family with visual scale marks — steps, labeled ticks, snap stops, ruler-style scale, and segmented tracks — for picking a numeric value with pointer drag or keyboard.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Marks Slider to your project and fits it to your theme.

"use client";

import SliderMarks from "@/components/ui/slider-marks";

export default function SliderMarksDemo() {
  return (
    <div className="flex w-full items-center justify-center p-10">
      <SliderMarks defaultValue={40} size="md" />
    </div>
  );
}