Slider

1
import type { ValidComponent } from "solid-js"
2
import { createMemo, For, mergeProps, splitProps } from "solid-js"
3

4
import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5
import * as SliderPrimitive from "@kobalte/core/slider"
6

7
import { cn } from "~/lib/utils"
8

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

13
const Slider = <T extends ValidComponent = "div">(
14
  rawProps: PolymorphicProps<T, SliderProps<T>>
15
) => {
16
  const props = mergeProps({ minValue: 0, maxValue: 100 }, rawProps)
17
  const [local, others] = splitProps(props as SliderProps, [
18
    "class",
19
    "defaultValue",
20
    "value",
21
    "minValue",
22
    "maxValue"
23
  ])
24

25
  const _values = createMemo(
26
    () =>
27
      Array.isArray(local.value)
28
        ? local.value
29
        : Array.isArray(local.defaultValue)
30
          ? local.defaultValue
31
          : [local.minValue, local.maxValue],
32
    [local.value, local.defaultValue, local.minValue, local.maxValue]
33
  )
34

35
  return (
36
    <SliderPrimitive.Root
37
      class={cn(
38
        "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",
39
        local.class
40
      )}
41
      data-slot="slider"
42
      defaultValue={local.defaultValue}
43
      maxValue={local.maxValue}
44
      minValue={local.minValue}
45
      value={local.value}
46
      {...others}
47
    >
48
      <SliderPrimitive.Track
49
        class={cn(
50
          "relative flex grow items-center justify-center rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5"
51
        )}
52
        data-slot="slider-track"
53
      >
54
        <SliderPrimitive.Fill
55
          class={cn(
56
            "absolute rounded-full bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
57
          )}
58
          data-slot="slider-range"
59
        />
60
        <For each={_values()}>
61
          {() => (
62
            <SliderPrimitive.Thumb
63
              class="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50"
64
              data-slot="slider-thumb"
65
            >
66
              <SliderPrimitive.Input />
67
            </SliderPrimitive.Thumb>
68
          )}
69
        </For>
70
      </SliderPrimitive.Track>
71
    </SliderPrimitive.Root>
72
  )
73
}
74

75
export { Slider }