konnosSlider.tsx31 lines · main
| 1 | // Props to https://github.com/shadcn-ui/ui/issues/885#issuecomment-2059600641 |
| 2 | // @mildtomato - consider using this as the main Slider component in packages/ui |
| 3 | |
| 4 | import { Slider as SliderPrimitive } from 'radix-ui' |
| 5 | import { ComponentPropsWithoutRef, ElementRef, forwardRef, Fragment } from 'react' |
| 6 | import { cn } from 'ui' |
| 7 | |
| 8 | export const Slider = forwardRef< |
| 9 | ElementRef<typeof SliderPrimitive.Root>, |
| 10 | ComponentPropsWithoutRef<typeof SliderPrimitive.Root> |
| 11 | >(({ className, ...props }, ref) => { |
| 12 | const initialValue = Array.isArray(props.value) ? props.value : [props.min, props.max] |
| 13 | |
| 14 | return ( |
| 15 | <SliderPrimitive.Root |
| 16 | ref={ref} |
| 17 | className={cn('relative flex w-full touch-none select-none items-center', className)} |
| 18 | {...props} |
| 19 | > |
| 20 | <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary"> |
| 21 | <SliderPrimitive.Range className="absolute h-full bg-primary" /> |
| 22 | </SliderPrimitive.Track> |
| 23 | {initialValue.map((_, index) => ( |
| 24 | <Fragment key={index}> |
| 25 | <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" /> |
| 26 | </Fragment> |
| 27 | ))} |
| 28 | </SliderPrimitive.Root> |
| 29 | ) |
| 30 | }) |
| 31 | Slider.displayName = SliderPrimitive.Root.displayName |