Slider

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

3
export default function SliderDemo() {
4
  return <Slider defaultValue={[75]} maxValue={100} step={1} class="mx-auto w-full max-w-xs" />;
5
}

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

3
export default function SliderRange() {
4
  return <Slider defaultValue={[25, 50]} maxValue={100} step={5} class="mx-auto w-full max-w-xs" />;
5
}

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

3
export default function SliderMultiple() {
4
  return (
5
    <Slider defaultValue={[10, 20, 70]} maxValue={100} step={10} class="mx-auto w-full max-w-xs" />
6
  );
7
}

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

3
export default function SliderVertical() {
4
  return (
5
    <div class="mx-auto flex w-full max-w-xs items-center justify-center gap-6">
6
      <Slider defaultValue={[50]} maxValue={100} step={1} orientation="vertical" class="h-40" />
7
      <Slider defaultValue={[25]} maxValue={100} step={1} orientation="vertical" class="h-40" />
8
    </div>
9
  );
10
}

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

5
export default function SliderControlled() {
6
  const [value, setValue] = createSignal([0.3, 0.7]);
7

8
  return (
9
    <div class="mx-auto grid w-full max-w-xs gap-3">
10
      <div class="flex items-center justify-between gap-2">
11
        <Label for="slider-demo-temperature">Temperature</Label>
12
        <span class="text-muted-foreground text-sm">{value().join(", ")}</span>
13
      </div>
14
      <Slider
15
        id="slider-demo-temperature"
16
        value={value()}
17
        onChange={(nextValue) => setValue(nextValue)}
18
        minValue={0}
19
        maxValue={1}
20
        step={0.1}
21
      />
22
    </div>
23
  );
24
}

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

3
export default function SliderDisabled() {
4
  return (
5
    <Slider defaultValue={[50]} maxValue={100} step={1} disabled class="mx-auto w-full max-w-xs" />
6
  );
7
}