Slider

1
import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2
import {
3
  type SliderFillProps,
4
  Slider as SliderPrimitive,
5
  type SliderRootProps,
6
  type SliderThumbProps,
7
  type SliderTrackProps,
8
  useSliderContext,
9
} from "@kobalte/core/slider";
10
import {
11
  type ComponentProps,
12
  createMemo,
13
  For,
14
  mergeProps,
15
  splitProps,
16
  untrack,
17
  type ValidComponent,
18
} from "solid-js";
19
import { cn } from "~/lib/utils";
20

21
type SliderProps<T extends ValidComponent = "div"> = PolymorphicProps<T, SliderRootProps<T>> &
22
  Pick<ComponentProps<T>, "class">;
23

24
const Slider = <T extends ValidComponent = "div">(rawProps: SliderProps<T>) => {
25
  const props = mergeProps({ minValue: 0, maxValue: 100 } as SliderProps<T>, rawProps);
26
  const [local, others] = splitProps(props as SliderProps, ["class", "defaultValue", "value"]);
27

28
  const values = createMemo(() => {
29
    if (Array.isArray(untrack(() => local.value))) return untrack(() => local.value);
30
    if (Array.isArray(local.defaultValue)) return local.defaultValue;
31
    return [others.minValue, others.maxValue];
32
  });
33

34
  return (
35
    <SliderPrimitive
36
      data-slot="slider"
37
      defaultValue={local.defaultValue}
38
      value={local.value}
39
      class={cn(
40
        "relative z-slider flex w-full touch-none select-none items-center data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-disabled:opacity-50",
41
        local.class,
42
      )}
43
      {...others}
44
    >
45
      <SliderTrack>
46
        <SliderFill />
47
      </SliderTrack>
48
      <For each={values()}>{() => <SliderThumb />}</For>
49
    </SliderPrimitive>
50
  );
51
};
52

53
type SliderTrackComponentProps<T extends ValidComponent = "div"> = PolymorphicProps<
54
  T,
55
  SliderTrackProps<T>
56
> &
57
  Pick<ComponentProps<T>, "class" | "children">;
58

59
const SliderTrack = <T extends ValidComponent = "div">(props: SliderTrackComponentProps<T>) => {
60
  const [local, others] = splitProps(props as SliderTrackComponentProps, ["class", "children"]);
61
  const context = useSliderContext();
62
  return (
63
    <SliderPrimitive.Track
64
      data-slot="slider-track"
65
      data-orientation={context.state.orientation()}
66
      class={cn("relative z-slider-track grow select-none overflow-hidden", local.class)}
67
      {...others}
68
    >
69
      {local.children}
70
    </SliderPrimitive.Track>
71
  );
72
};
73

74
type SliderFillComponentProps<T extends ValidComponent = "div"> = PolymorphicProps<
75
  T,
76
  SliderFillProps<T>
77
> &
78
  Pick<ComponentProps<T>, "class">;
79

80
const SliderFill = <T extends ValidComponent = "div">(props: SliderFillComponentProps<T>) => {
81
  const [local, others] = splitProps(props as SliderFillComponentProps, ["class"]);
82
  const context = useSliderContext();
83
  return (
84
    <SliderPrimitive.Fill
85
      data-slot="slider-range"
86
      data-orientation={context.state.orientation()}
87
      class={cn(
88
        "absolute z-slider-range data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full",
89
        local.class,
90
      )}
91
      {...others}
92
    />
93
  );
94
};
95

96
type SliderThumbComponentProps<T extends ValidComponent = "span"> = PolymorphicProps<
97
  T,
98
  SliderThumbProps<T>
99
> &
100
  Pick<ComponentProps<T>, "class">;
101

102
const SliderThumb = <T extends ValidComponent = "span">(props: SliderThumbComponentProps<T>) => {
103
  const [local, others] = splitProps(props as SliderThumbComponentProps, ["class"]);
104
  return (
105
    <SliderPrimitive.Thumb
106
      data-slot="slider-thumb"
107
      class={cn(
108
        "z-slider-thumb block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50",
109
        local.class,
110
      )}
111
      {...others}
112
    >
113
      <SliderPrimitive.Input />
114
    </SliderPrimitive.Thumb>
115
  );
116
};
117

118
export { Slider };

import { Slider } from "~/components/ui/slider";

function SliderBasic() {
  return (
    <Example title="Basic">
      <Slider defaultValue={[50]} maxValue={100} step={1} />
    </Example>
  );
}

import { Slider } from "~/components/ui/slider";

function SliderRange() {
  return (
    <Example title="Range">
      <Slider defaultValue={[25, 50]} maxValue={100} step={5} />
    </Example>
  );
}

import { Slider } from "~/components/ui/slider";

function SliderMultiple() {
  return (
    <Example title="Multiple Thumbs">
      <Slider defaultValue={[10, 20, 70]} maxValue={100} step={10} />
    </Example>
  );
}

import { Slider } from "~/components/ui/slider";

function SliderVertical() {
  return (
    <Example title="Vertical">
      <div class="flex items-center gap-6">
        <Slider defaultValue={[50]} maxValue={100} step={1} orientation="vertical" class="h-40" />
        <Slider defaultValue={[25]} maxValue={100} step={1} orientation="vertical" class="h-40" />
      </div>
    </Example>
  );
}

import { createSignal } from "solid-js";
import { Label } from "~/components/ui/label";
import { Slider } from "~/components/ui/slider";

function SliderControlled() {
  const [value, setValue] = createSignal([0.3, 0.7]);

  return (
    <Example title="Controlled">
      <div class="grid w-full gap-3">
        <div class="flex items-center justify-between gap-2">
          <Label for="slider-demo-temperature">Temperature</Label>
          <span class="text-muted-foreground text-sm">{value().join(", ")}</span>
        </div>
        <Slider
          id="slider-demo-temperature"
          value={value()}
          onChange={(v) => setValue(v)}
          minValue={0}
          maxValue={1}
          step={0.1}
        />
      </div>
    </Example>
  );
}

import { Slider } from "~/components/ui/slider";

function SliderDisabled() {
  return (
    <Example title="Disabled">
      <Slider defaultValue={[50]} maxValue={100} step={1} disabled />
    </Example>
  );
}