24 lines
1.1 KiB
TypeScript
24 lines
1.1 KiB
TypeScript
import * as SliderPrimitive from '@radix-ui/react-slider';
|
|
|
|
interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
|
|
className?: string;
|
|
}
|
|
|
|
export function Slider({ className, ...props }: SliderProps) {
|
|
return (
|
|
<SliderPrimitive.Root
|
|
className={`relative flex w-full touch-none select-none items-center ${className || ''}`}
|
|
{...props}
|
|
>
|
|
<SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-warm-200 dark:bg-navy-700">
|
|
<SliderPrimitive.Range className="absolute h-full bg-teal-600" />
|
|
</SliderPrimitive.Track>
|
|
{props.value?.map((_, i) => (
|
|
<SliderPrimitive.Thumb
|
|
key={i}
|
|
className="block h-5 w-5 rounded-full border-2 border-teal-600 dark:border-teal-500 bg-white dark:bg-navy-800 ring-offset-white dark:ring-offset-navy-950 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-teal-600 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
|
|
/>
|
|
))}
|
|
</SliderPrimitive.Root>
|
|
);
|
|
}
|