Components
Loading preview...
@starc007
npx shadcn@latest add https://21st.dev/r/starc007/be-ui-range-slider"use client";
import { useState } from "react";
import { RangeSlider } from "@/components/ui/be-ui-range-slider";
export default function RangeSliderPreview() {
const [value, setValue] = useState(40);
return (
<div className="flex w-full max-w-sm flex-col gap-3">
<div className="flex items-center justify-between text-sm text-muted-foreground">
<span>Drag the handle</span>
<span className="tabular-nums text-foreground">{value}</span>
</div>
<RangeSlider value={value} onValueChange={setValue} step={5} aria-label="Value" />
</div>
);
}