Components
Loading preview...
Here is Field component
npx shadcn@latest add https://21st.dev/r/shadcn/field-1"use client"
import { useState } from "react"
import {
Field,
FieldDescription,
FieldTitle,
} from "@/components/ui/field-1"
import { Slider } from "@/components/ui/slider"
export default function FieldSlider() {
const [value, setValue] = useState([200, 800])
return (
<div className="w-full max-w-md">
<Field>
<FieldTitle>Price Range</FieldTitle>
<FieldDescription>
Set your budget range ($
<span className="font-medium tabular-nums">{value[0]}</span> -{" "}
<span className="font-medium tabular-nums">{value[1]}</span>).
</FieldDescription>
<Slider
value={value}
onValueChange={setValue}
max={1000}
min={0}
step={10}
className="mt-2 w-full"
aria-label="Price Range"
/>
</Field>
</div>
)
}