Slider · Smallest

Default

The label and current value sit inside the track. Slider is controlled: pass value and onChange.

Stability0.55

Unit

unit is appended to the displayed value, like 8s or 1.2×.

Silence timeout8s

Tick labels

Pass tickLabels to name points along the scale. They spread evenly under the track, first to last.

Temperature0.7

Precise

Balanced

Creative

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

export default function SliderTickLabels() {
  const [temperature, setTemperature] = useState(0.7);

  return (
    <div className="w-full max-w-sm">
      <Slider
        label="Temperature"
        value={temperature}
        onChange={setTemperature}
        min={0}
        max={1}
        step={0.1}
        tickLabels={["Precise", "Balanced", "Creative"]}
      />
    </div>
  );
}

Midpoint

midpointValue pins a value to the centre of the track, so 1× sits in the middle of a 0.5×–2× range.

Speaking rate1.00×

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

export default function SliderMidpoint() {
  const [speed, setSpeed] = useState(1);

  return (
    <div className="w-full max-w-sm">
      <Slider
        label="Speaking rate"
        value={speed}
        onChange={setSpeed}
        min={0.5}
        max={2}
        step={0.05}
        midpointValue={1}
        unit="×"
      />
    </div>
  );
}

Secondary

A neutral-100 track with a neutral-700 fill and white handle, for sliders on a white panel.

Similarity0.75

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

export default function SliderSecondary() {
  const [similarity, setSimilarity] = useState(0.75);

  return (
    <div className="w-full max-w-sm">
      <Slider
        label="Similarity"
        value={similarity}
        onChange={setSimilarity}
        min={0}
        max={1}
        step={0.01}
        variant="secondary"
      />
    </div>
  );
}

Best practices

When to use

Use for an approximate continuous setting where feel matters more than an exact number, such as stability, temperature, or speaking rate.
Use Input, Select, or Radio when people need a precise value or must compare a few fixed options.

Behavior

Slider is controlled: pass value and onChange.
Use a step that matches the precision people can control, like 0.01 for 0–1 or 1 for seconds.
Add unit (“s”, “×”) when the number alone is ambiguous, tickLabels to name the ends and middle of a scale, and midpointValue when the neutral value is not the arithmetic middle (1× in 0.5×–2×).
Use variant="secondary" on white panels; primary is a white track for tinted panels.

Content

Keep the label to one or two words; it sits inside the track beside the value.

Accessibility

Support keyboard increment, decrement, Home, and End actions, and expose the current numeric value.