Slider v2

Playground

Open Show controls to switch the mode, size, variant and step count.

import { SliderV2 } from "@smallest-inc/ui";

export function Speed() {
  return <SliderV2 aria-label="Speed" mode="dots" min={0} max={8} defaultValue={4} />;
}

Dots

A dot on every step. The value snaps to the dots, and the thumb holds a little on each one as you drag past it.

import { SliderV2 } from "@smallest-inc/ui";

export default function SliderV2Dots() {
  return <SliderV2 aria-label="Speed" mode="dots" min={0} max={8} defaultValue={4} />;
}

Continuous

No dots. The thumb follows the pointer exactly.

import { SliderV2 } from "@smallest-inc/ui";

export default function SliderV2Continuous() {
  return <SliderV2 aria-label="Volume" min={0} max={100} defaultValue={40} />;
}

Marks

A dot at a value worth landing on, such as the default. A dragged thumb catches on it.

import { SliderV2 } from "@smallest-inc/ui";

export default function SliderV2Marks() {
  return <SliderV2 aria-label="Line width" min={2} max={40} defaultValue={24} marks={[14]} />;
}

Small

A 20px track with a 16×24 thumb, for compact settings rows.

import { SliderV2 } from "@smallest-inc/ui";

export default function SliderV2Small() {
  return <SliderV2 aria-label="Speed" size="sm" mode="dots" min={0} max={8} defaultValue={4} />;
}

Secondary

A neutral-150 track for neutral-50 panels, where the primary track would disappear.

import { SliderV2 } from "@smallest-inc/ui";

/** Secondary is for neutral-50 panels. */
export default function SliderV2Secondary() {
  return <SliderV2 aria-label="Speed" variant="secondary" mode="dots" min={0} max={8} defaultValue={4} />;
}

Field

SliderField puts the label on the left, the value in a small field on the right, and the slider below. Type a number and press Enter, or use the arrow keys.

import { useState } from "react";
import { SliderField } from "@smallest-inc/ui";

export default function SliderV2Field() {
  const [latency, setLatency] = useState(600);

  return (
    <div className="w-full max-w-xs">
      <SliderField
        label="Response delay"
        unit="ms"
        min={0}
        max={2000}
        step={50}
        value={latency}
        onValueChange={setLatency}
      />
    </div>
  );
}

Best practices