Slider

1import { Slider as KobalteSlider } from "@kobalte/core/slider";
2import type { Component, ComponentProps } from "solid-js";
3import { For, splitProps } from "solid-js";
4import { cn } from "~/lib/utils";
5 
6export type SliderProps = ComponentProps<typeof KobalteSlider> & {
7  label?: string;
8  class?: string;
9};
10 
11export const Slider: Component<SliderProps> = (props) => {
12  const [local, rest] = splitProps(props, ["class", "label", "defaultValue"]);
13  const values = () => (rest.value ?? local.defaultValue ?? [0]) as number[];
14 
15  return (
16    <KobalteSlider
17      class={cn(
18        "relative flex w-full touch-none select-none flex-col items-center gap-2",
19        local.class,
20      )}
21      {...(local.defaultValue !== undefined ? { defaultValue: local.defaultValue } : {})}
22      {...rest}
23    >
24      {local.label && (
25        <div class="flex w-full justify-between">
26          <KobalteSlider.Label class="text-sm font-medium leading-none">
27            {local.label}
28          </KobalteSlider.Label>
29          <KobalteSlider.ValueLabel class="text-sm text-muted-foreground" />
30        </div>
31      )}
32      <KobalteSlider.Track class="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
33        <KobalteSlider.Fill class="absolute h-full bg-primary" />
34        <For each={values()}>
35          {(_, _i) => (
36            <KobalteSlider.Thumb
37              class={cn(
38                "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background",
39                "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
40                "disabled:pointer-events-none disabled:opacity-50",
41                "top-[-6px]",
42              )}
43            >
44              <KobalteSlider.Input />
45            </KobalteSlider.Thumb>
46          )}
47        </For>
48      </KobalteSlider.Track>
49    </KobalteSlider>
50  );
51};