slider

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6import { Slider as SliderPrimitive } from "@ark-ui/react/slider"
7 
8const Slider = SliderPrimitive.Root
9 
10const SliderControl = React.forwardRef<
11  React.ElementRef<typeof SliderPrimitive.Control>,
12  SliderPrimitive.ControlProps
13>(({ className, ...props }, ref) => (
14  <SliderPrimitive.Control
15    ref={ref}
16    className={cn(
17      "relative flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[disabled]:opacity-50",
18      className
19    )}
20    {...props}
21  />
22))
23SliderControl.displayName = "SliderControl"
24 
25const SliderDraggingIndicator = SliderPrimitive.DraggingIndicator
26 
27const SliderLabel = React.forwardRef<
28  React.ElementRef<typeof SliderPrimitive.Label>,
29  SliderPrimitive.LabelProps
30>(({ className, ...props }, ref) => (
31  <SliderPrimitive.Label
32    ref={ref}
33    className={cn(
34      "select-none font-medium text-foreground text-sm leading-4 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
35      className
36    )}
37    {...props}
38  />
39))
40SliderLabel.displayName = "SliderLabel"
41 
42const SliderMarker = React.forwardRef<
43  React.ElementRef<typeof SliderPrimitive.Marker>,
44  SliderPrimitive.MarkerProps
45>(({ className, ...props }, ref) => (
46  <SliderPrimitive.Marker
47    ref={ref}
48    className={cn("font-medium text-muted-foreground text-xs", className)}
49    {...props}
50  />
51))
52SliderMarker.displayName = "SliderMarker"
53 
54const SliderMarkerGroup = React.forwardRef<
55  React.ElementRef<typeof SliderPrimitive.MarkerGroup>,
56  SliderPrimitive.MarkerGroupProps
57>(({ className, ...props }, ref) => (
58  <SliderPrimitive.MarkerGroup
59    ref={ref}
60    className={cn("mt-2", className)}
61    {...props}
62  />
63))
64SliderMarkerGroup.displayName = "SliderMarkerGroup"
65 
66const SliderRange = React.forwardRef<
67  React.ElementRef<typeof SliderPrimitive.Range>,
68  SliderPrimitive.RangeProps
69>(({ className, ...props }, ref) => (
70  <SliderPrimitive.Range
71    ref={ref}
72    className={cn(
73      "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
74      className
75    )}
76    {...props}
77  />
78))
79SliderRange.displayName = "SliderRange"
80 
81const SliderRootProvider = SliderPrimitive.RootProvider
82 
83const SliderThumb = React.forwardRef<
84  React.ElementRef<typeof SliderPrimitive.Thumb>,
85  SliderPrimitive.ThumbProps
86// … truncated