Minimal Slider

Forms 4

About

A family of low-emphasis, decorative range slider styles (hairline, bare ring, ghost, thin bar and dotted track) with pointer and keyboard support for picking a numeric value.

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

Code

How Minimal Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  HairSlider,
  BareSlider,
  GhostSlider,
  ThinSlider,
  DotSlider,
} from "@/components/ui/slider-minimal";

export default function SliderMinimalDemo() {
  return (
    <div className="flex w-64 flex-col gap-8">
      <HairSlider defaultValue={40} />
      <BareSlider defaultValue={55} />
      <GhostSlider defaultValue={30} />
      <ThinSlider defaultValue={70} />
      <DotSlider defaultValue={50} />
    </div>
  );
}