Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
2.0 kB · 55 lines
TSX
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556import { Slider as SliderPrimitive } from "@base-ui/react/slider";
import { cn } from "@/lib/utils";
function Slider({ className, defaultValue, value, min = 0, max = 100, ...props}: SliderPrimitive.Root.Props) { const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max];
return ( <SliderPrimitive.Root className={cn( "group/slider data-horizontal:w-full data-vertical:h-full", className, )} data-slot="slider" defaultValue={defaultValue} value={value} min={min} max={max} thumbAlignment="center" {...props} > <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col"> <SliderPrimitive.Track data-slot="slider-track" className="relative h-1 w-full grow overflow-hidden rounded-full bg-gray-500/50 select-none data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1" > <SliderPrimitive.Indicator data-slot="slider-range" className="bg-primary/80 h-1 rounded-full select-none data-horizontal:h-full data-vertical:w-full" /> </SliderPrimitive.Track> {Array.from({ length: _values.length }, (_, index) => ( <SliderPrimitive.Thumb data-slot="slider-thumb" key={index} className="border-ring ring-ring group-hover/slider:bg-ring relative block size-3 shrink-0 scale-50 rounded-full border opacity-0 transition-[opacity,scale,background-color,color] select-none group-hover/slider:scale-100 group-hover/slider:opacity-100 after:absolute after:-inset-2 focus-visible:outline-hidden active:ring-1 disabled:pointer-events-none disabled:opacity-50" /> ))} </SliderPrimitive.Control> </SliderPrimitive.Root> );}
export { Slider };