Components
Loading preview...
Enhanced shadcn/ui slider
npx shadcn@latest add https://21st.dev/r/originui/slider"use client";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { useState } from "react";
function Component() {
const min_price = 5;
const max_price = 1240;
const [value, setValue] = useState([min_price, max_price]);
const formatPrice = (price: number) => {
return price === max_price ? `$${price.toLocaleString()}+` : `$${price.toLocaleString()}`;
};
return (
<div className="space-y-3 min-w-[300px]">
<Label className="tabular-nums">
From {formatPrice(value[0])} to {formatPrice(value[1])}
</Label>
<div className="flex items-center gap-4">
<Slider
value={value}
onValueChange={setValue}
min={min_price}
max={max_price}
aria-label="Price range slider"
/>
<Button variant="outline">Go</Button>
</div>
</div>
);
}
export { Component };