A value or a range chosen by dragging a thumb along a track, with arrows and Page keys.

WebBetaForms

Web only — React, from @krizaka/ui/slider. Beta: its API may still change in a minor version.

When to use

For a value chosen by feel within bounds: volume, speed, brightness.
Two thumbs for a range: a price, a duration.

When not to use

For an exact number the user knows: an input of type number.Use instead: Field
For a few named options.Use instead: Radio group

Installation

Install

npm install @krizaka/ui@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Import

import { Slider } from "@krizaka/ui/slider";

Examples

Default

The thumb alone, named by label.

import { Slider } from "@krizaka/ui/slider";

export default function SliderDefault() {
  return <Slider label="Volume" defaultValue={60} />;
}

With a label

showLabel: the label and the formatted value above the track.

Speed

"use client";

import { Slider } from "@krizaka/ui/slider";

// `showLabel`: the label and the formatted value above the track.
export default function SliderWithLabel() {
  return <Slider label="Speed" showLabel defaultValue={1.5} min={0.5} max={2} step={0.25} formatValue={(v) => `${v}×`} />;
}

Centred

origin={0} on a ± range.

Brightness

"use client";

import { Slider } from "@krizaka/ui/slider";

// `origin={0}` on a ±range: the fill starts at the centre.
export default function SliderCentred() {
  return <Slider label="Brightness" showLabel defaultValue={-30} min={-100} max={100} origin={0} formatValue={(v) => `${v > 0 ? "+" : ""}${v} %`} />;
}

Range

Two thumbs, each named.

Price

"use client";

import { Slider } from "@krizaka/ui/slider";

// Two thumbs, each named by `thumbLabels`.
export default function SliderRange() {
  return (
    <Slider<[number, number]>
      label="Price"
      thumbLabels={["Minimum price", "Maximum price"]}
      showLabel
      defaultValue={[10, 60]}
      max={100}
      step={5}
      formatValue={(v) => `$${v}`}
    />
  );
}

Disabled

Not available.

import { Slider } from "@krizaka/ui/slider";

export default function SliderDisabled() {
  return <Slider label="Volume" defaultValue={60} disabled />;
}

Props

A slider on one value or a range: value/defaultValue + onValueChange, min, max, step.

Prop	Type	Default	Description
`label`required	`string`	—	The accessible name — of the thumb, or of both thumbs of a range — passed translated.
`defaultValue`	`SliderValue`	—	The value at first, uncontrolled: one number, or two for a range.
`formatValue`	`((value: number) => string)`	—	The value as words (aria-valuetext) and as shown: "1.5×", "−12 %", "3 min".
`onValueChange`	`((value: V) => void)`	—	Called on every move, with one number or two.
`onValueCommit`	`((value: V) => void)`	—	Called once the drag or the key press ends.
`origin`	`number`	—	Fills from this value instead of the minimum (a ±range from 0: brightness, balance). One thumb only.
`showLabel`	`boolean`	—	Shows the label and the value above the track. Without it, `label` only names the thumb.
`thumbLabels`	`[string, string]`	—	For a range: each thumb's own name (["Minimum", "Maximum"]), passed translated.
`value`	`SliderValue`	—	One number (a thumb) or two (a range). Controlled with `onValueChange`.

Accessibility

Radix Slider: each thumb is a slider named by label (or thumbLabels for a range).
formatValue also gives aria-valuetext: the value as it is read.

Keyboard

Keys	Action
`Arrow keys`	Move by one step.
`Page Up / Page Down`	Move by a larger step.
`Home / End`	Go to the minimum or the maximum.

Best practices

Show the value (showLabel) when it matters, formatted by formatValue.
Choose a step people can reach with the arrows; origin to fill from a centre on a ± range.

Generated from the code of @krizaka/ui 2.0.0-beta.6: its meta.ts, its examples and its types.Edit this documentation on GitHub

Slider