Components
Loading preview...
A fluid animated slider with single and range modes, step dots, tooltip value display, and hover preview. Built on Radix UI with Framer Motion.
@micka_design
npx shadcn@latest add https://21st.dev/r/micka_design/slider"use client";
import { useState } from "react";
import { Slider } from "../components/ui/slider";
export default function SliderRangeDemo() {
const [value, setValue] = useState<[number, number]>([20, 70]);
return (
<div className="flex items-center justify-center min-h-screen bg-background">
<div style={{ width: "700px", maxWidth: "90vw" }}>
<Slider value={value} onChange={(v) => setValue(v as [number, number])} />
</div>
</div>
);
}