slider.tsx 1.0 KB

12345678910111213141516171819202122232425
  1. 'use client';
  2. import * as React from 'react';
  3. import * as SliderPrimitive from '@radix-ui/react-slider';
  4. import { cn } from '@/lib/utils';
  5. const Slider = React.forwardRef<
  6. React.ElementRef<typeof SliderPrimitive.Root>,
  7. React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
  8. >(({ className, ...props }, ref) => (
  9. <SliderPrimitive.Root
  10. ref={ref}
  11. className={cn('relative flex w-full touch-none select-none items-center', className)}
  12. {...props}
  13. >
  14. <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
  15. <SliderPrimitive.Range className="absolute h-full bg-primary" />
  16. </SliderPrimitive.Track>
  17. <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
  18. </SliderPrimitive.Root>
  19. ));
  20. Slider.displayName = SliderPrimitive.Root.displayName;
  21. export { Slider };