Slider

1import type { JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5import * as SliderPrimitive from "@kobalte/core/slider"
6 
7import { cn } from "~/lib/utils"
8import { Label } from "~/registry/ui/label"
9 
10type SliderRootProps<T extends ValidComponent = "div"> = SliderPrimitive.SliderRootProps<T> & {
11  class?: string | undefined
12}
13 
14const Slider = <T extends ValidComponent = "div">(
15  props: PolymorphicProps<T, SliderRootProps<T>>
16) => {
17  const [local, others] = splitProps(props as SliderRootProps, ["class"])
18  return (
19    <SliderPrimitive.Root
20      class={cn("relative flex w-full touch-none select-none flex-col items-center", local.class)}
21      {...others}
22    />
23  )
24}
25 
26type SliderTrackProps<T extends ValidComponent = "div"> = SliderPrimitive.SliderTrackProps<T> & {
27  class?: string | undefined
28}
29 
30const SliderTrack = <T extends ValidComponent = "div">(
31  props: PolymorphicProps<T, SliderTrackProps<T>>
32) => {
33  const [local, others] = splitProps(props as SliderTrackProps, ["class"])
34  return (
35    <SliderPrimitive.Track
36      class={cn("relative h-2 w-full grow rounded-full bg-secondary", local.class)}
37      {...others}
38    />
39  )
40}
41 
42type SliderFillProps<T extends ValidComponent = "div"> = SliderPrimitive.SliderFillProps<T> & {
43  class?: string | undefined
44}
45 
46const SliderFill = <T extends ValidComponent = "div">(
47  props: PolymorphicProps<T, SliderFillProps<T>>
48) => {
49  const [local, others] = splitProps(props as SliderFillProps, ["class"])
50  return (
51    <SliderPrimitive.Fill
52      class={cn("absolute h-full rounded-full bg-primary", local.class)}
53      {...others}
54    />
55  )
56}
57 
58type SliderThumbProps<T extends ValidComponent = "span"> = SliderPrimitive.SliderThumbProps<T> & {
59  class?: string | undefined
60  children?: JSX.Element
61}
62 
63const SliderThumb = <T extends ValidComponent = "span">(
64  props: PolymorphicProps<T, SliderThumbProps<T>>
65) => {
66  const [local, others] = splitProps(props as SliderThumbProps, ["class", "children"])
67  return (
68    <SliderPrimitive.Thumb
69      class={cn(
70        "top-[-6px] block size-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
71        local.class
72      )}
73      {...others}
74    >
75      <SliderPrimitive.Input />
76    </SliderPrimitive.Thumb>
77// … truncated