Slider

A value or a range chosen by dragging a thumb along a track — steps you can see, the value floating over the thumb, the brand’s gradient, horizontal or vertical — with arrows and Page keys.

Web + MobileBetaForms

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Used by Orochia, krizaka.com.

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 @krizaka/tailwind @krizaka/tokens 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.

With a label

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

Speed

Centred

origin={0} on a ± range.

Brightness

Range

Two thumbs, each named.

Price

Disabled

Not available.

Steps and marks

ticks draws a graduation per step, marks their words under the track.

Playback speed

Floating value

floatingValue: the value over the thumb while it is touched; size="lg".

Price range

Two thumbs, their values floating, the bounds written under the track.

Vertical

orientation="vertical": faders; tone="solid" for the accent alone.

Props

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

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.
`floatingValue`	`boolean \| "always"`	—	Shows the value floating over the thumb while it is hovered, focused or held (`"always"`: at all times).
`formatValue`	`((value: number) => string)`	—	The value as words (aria-valuetext) and as shown: "1.5×", "−12 %", "3 min".
`marks`	`readonly SliderMark[]`	—	Words under the track at some values (`[{ value: 0, label: "0" }, { value: 100, label: "100" }]`). Horizontal only.
`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 horizontal thumb only.
`showLabel`	`boolean`	—	Shows the label and the value above the track. Without it, `label` only names the thumb.
`size`	`"md" \| "lg"`	`md`	md · lg (a thicker track and thumb: a hero control, a touch screen).
`thumbLabels`	`[string, string]`	—	For a range: each thumb's own name (["Minimum", "Maximum"]), passed translated.
`ticks`	`boolean \| readonly number[]`	—	Draws a graduation at every step (`true`, up to 40 of them) or at the values given.
`tone`	`"gradient" \| "solid"`	`gradient`	`gradient` (the brand's accent → accent-2, a glow) or `solid` (the accent alone).
`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.
Show the steps (ticks) when there are few of them, and name the ends (marks) when the bounds are not obvious.

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