Slider

Labeled value

Keep the value in useSignal and pass it as value together with `onChange.

Volume

tsx

import { component$, useSignal } from "@builder.io/qwik";
import { Slider } from "~/components/ui/base/slider";

export default component$(() => {
  const level = useSignal(40);
  return (
    <Slider
      label="Volume"
      value={level.value}
      onChange$={(v) => {
        level.value = v;
      }}
    />
  );
});

Min, max and step

The min, max and step props for the slider's range and step.

Price (USD)

tsx

import { component$, useSignal } from "@builder.io/qwik";
import { Slider } from "~/components/ui/base/slider";

export default component$(() => {
  const price = useSignal(100);
  return (
    <Slider
      label="Price (USD)"
      min={0}
      max={500}
      step={25}
      value={price.value}
      onChange$={(v) => {
        price.value = v;
      }}
    />
  );
});

Thumb size (thumbSize)

The thumbSize prop changes the thumb size and the track height: sm, md (default), lg.

Small (sm)

Medium (md)

Large (lg)

tsx

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

<div class="flex max-w-md flex-col gap-6">
  <Slider label="Small (sm)" thumbSize="sm" value={30} />
  <Slider label="Medium (md)" thumbSize="md" value={50} />
  <Slider label="Large (lg)" thumbSize="lg" value={70} />
</div>

Accent and background color

The color and backgroundColor props take Tailwind classes ( accent-*, bg-* from the palette in COLORS.md).

Temperature

tsx

import { component$, useSignal } from "@builder.io/qwik";
import { Slider } from "~/components/ui/base/slider";

export default component$(() => {
  const warmth = useSignal(50);
  return (
    <Slider
      label="Temperature"
      color="accent-system-orange"
      backgroundColor="bg-fill-quaternary"
      value={warmth.value}
      onChange$={(v) => {
        warmth.value = v;
      }}
    />
  );
});

Metadata

Source: meta.generated.json (see npm run generate)

File base/slider/meta.generated.json not found or path not allowed.