yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import * as SliderPrimitive from "@radix-ui/react-slider";
2import { cva, type VariantProps } from "class-variance-authority";
3import { forwardRef, memo } from "react";
4import cn from "@/helpers/cn";
5
6const thumbVariants = cva(
7 "block bg-gray-900 focus:outline-hidden active:scale-110",
8 {
9 defaultVariants: { showValueInThumb: false },
10 variants: {
11 showValueInThumb: {
12 false: "size-5 rounded-full",
13 true: "rounded-lg px-2 py-1 font-bold text-white text-xs"
14 }
15 }
16 }
17);
18
19interface RangeSliderProps
20 extends SliderPrimitive.SliderProps,
21 VariantProps<typeof thumbVariants> {
22 className?: string;
23 displayValue?: string;
24}
25
26const RangeSlider = forwardRef<HTMLInputElement, RangeSliderProps>(
27 ({ className = "", displayValue, showValueInThumb, ...rest }, ref) => {
28 return (
29 <SliderPrimitive.Root
30 className={cn(
31 "relative flex h-5 w-full touch-none select-none items-center",
32 className
33 )}
34 max={100}
35 ref={ref}
36 step={1}
37 {...rest}
38 >
39 <SliderPrimitive.Track className="relative h-1 grow rounded-full bg-gray-200 dark:bg-gray-800">
40 <SliderPrimitive.Range className="absolute h-full rounded-full" />
41 </SliderPrimitive.Track>
42 <SliderPrimitive.Thumb
43 aria-label="Slider"
44 className={thumbVariants({ showValueInThumb })}
45 >
46 {showValueInThumb ? displayValue || rest.value : null}
47 </SliderPrimitive.Thumb>
48 </SliderPrimitive.Root>
49 );
50 }
51);
52
53export default memo(RangeSlider);