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 SliderStepsDemo() {
const [value, setValue] = useState(3);
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)}
min={0} max={5} step={1}
showSteps
label="Steps"
/>
</div>
</div>
);
}