Components
Loading preview...
An enhancement slider that allows you to select a range of values.
@arihantcodes_1f7b8c4d
npx shadcn@latest add https://21st.dev/r/arihantcodes_1f7b8c4d/dual-range-slider'use client';
import React, { useState } from 'react';
import { DualRangeSlider } from '@/components/ui/dual-range-slider';
const DualRangeSliderDemo = () => {
const [values, setValues] = useState([0, 100]);
return (
<div className="w-full max-w-[400px] px-10">
<DualRangeSlider
label={(value) => value}
value={values}
onValueChange={setValues}
min={0}
max={100}
step={1}
/>
</div>
);
};
export { DualRangeSliderDemo };