About
An input where the user selects a value from within a given range.
Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slider to your project and fits it to your theme.
Code
How Slider is used: the demo's code. The component's own source comes with a free account.
Usage.tsx
import { Slider, SliderThumb } from '@/components/ui/slider';
export default function SliderDemo() {
return (
<div className="flex flex-col gap-5 p-10 w-full mx-auto max-w-[600px] h-screen justify-center items-center">
<div className="w-full md:w-[400px]">
<Slider defaultValue={[100, 450]} min={0} max={600} step={1}>
<SliderThumb />
<SliderThumb />
</Slider>
</div>
</div>
);
}
Dependencies
More by Sean Hello
View all
3D Testimonails
3.3K
Line Charts 9
635
Alert
492
Area Charts 1
385
Line Charts 6
384
Scroll Area
376
Area Charts 2
317
Navigation Menu
305
More in Forms
View all
Premium Auth
497
Login 2
7
Authentication Card
45
Login 1
52
Contact Card
1K
Form
16
Form
136
Card Studio
41
