Slider

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import type { JSX, ValidComponent } from "solid-js";
3

4
import { splitProps } from "solid-js";
5
import * as SliderPrimitive from "@kobalte/core/slider";
6

7
import { Label } from "~/components/ui/label";
8
import { cn } from "~/lib/utils";
9

10
type SliderRootProps<T extends ValidComponent = "div"> =
11
  SliderPrimitive.SliderRootProps<T> & {
12
    class?: string | undefined;
13
  };
14

15
const Slider = <T extends ValidComponent = "div">(
16
  props: PolymorphicProps<T, SliderRootProps<T>>,
17
) => {
18
  const [local, others] = splitProps(props as SliderRootProps, ["class"]);
19
  return (
20
    <SliderPrimitive.Root
21
      data-slot="slider"
22
      class={cn(
23
        "relative flex w-full touch-none flex-col items-center select-none",
24
        local.class,
25
      )}
26
      {...others}
27
    />
28
  );
29
};
30

31
type SliderTrackProps<T extends ValidComponent = "div"> =
32
  SliderPrimitive.SliderTrackProps<T> & {
33
    class?: string | undefined;
34
  };
35

36
const SliderTrack = <T extends ValidComponent = "div">(
37
  props: PolymorphicProps<T, SliderTrackProps<T>>,
38
) => {
39
  const [local, others] = splitProps(props as SliderTrackProps, ["class"]);
40
  return (
41
    <SliderPrimitive.Track
42
      data-slot="slider-track"
43
      class={cn(
44
        "relative h-3 w-full grow rounded-base border-2 border-border bg-secondary-background",
45
        local.class,
46
      )}
47
      {...others}
48
    />
49
  );
50
};
51

52
type SliderFillProps<T extends ValidComponent = "div"> =
53
  SliderPrimitive.SliderFillProps<T> & {
54
    class?: string | undefined;
55
  };
56

57
const SliderFill = <T extends ValidComponent = "div">(
58
  props: PolymorphicProps<T, SliderFillProps<T>>,
59
) => {
60
  const [local, others] = splitProps(props as SliderFillProps, ["class"]);
61
  return (
62
    <SliderPrimitive.Fill
63
      data-slot="slider-fill"
64
      class={cn("absolute h-full rounded-base bg-primary", local.class)}
65
      {...others}
66
    />
67
  );
68
};
69

70
type SliderThumbProps<T extends ValidComponent = "span"> =
71
  SliderPrimitive.SliderThumbProps<T> & {
72
    class?: string | undefined;
73
    children?: JSX.Element;
74
  };
75

76
const SliderThumb = <T extends ValidComponent = "span">(
77
  props: PolymorphicProps<T, SliderThumbProps<T>>,
78
) => {
79
  const [local, others] = splitProps(props as SliderThumbProps, [
80
    "class",
81
    "children",
82
  ]);
83
  return (
84
    <SliderPrimitive.Thumb
85
      data-slot="slider-thumb"
86
      class={cn(
87
        "-top-1.5 block size-5 rounded-full border-2 border-border bg-white ring-offset-white transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
88
        local.class,
89
      )}
90
      {...others}
91
    >
92
      <SliderPrimitive.Input />
93
    </SliderPrimitive.Thumb>
94
  );
95
};
96

97
const SliderLabel = <T extends ValidComponent = "label">(
98
  props: PolymorphicProps<T, SliderPrimitive.SliderLabelProps<T>>,
99
) => {
100
  return (
101
    <SliderPrimitive.Label data-slot="slider-label" as={Label} {...props} />
102
  );
103
};
104

105
const SliderValueLabel = <T extends ValidComponent = "label">(
106
  props: PolymorphicProps<T, SliderPrimitive.SliderValueLabelProps<T>>,
107
) => {
108
  return (
109
    <SliderPrimitive.ValueLabel
110
      data-slot="slider-value-label"
111
      as={Label}
112
      {...props}
113
    />
114
  );
115
};
116

117
export {
118
  Slider,
119
  SliderTrack,
120
  SliderFill,
121
  SliderThumb,
122
  SliderLabel,
123
  SliderValueLabel,
124
};