Slider

Selects a value from a continuous range by dragging a thumb.

import { Slider } from '@basiiik/ui';

The snippet an agent gets

From get_component_snippet, with the required props filled in from the spec. Every snippet is type-checked against the library before it is shipped.

import { Slider } from '@basiiik/ui';

<Slider label="Volume" />

Example values were filled in for the required prop label: replace them with your own.
Built on a native range input. The Figma Value axis (25, 50, 75) is just the value prop; the thumb and fill follow it. Hover and Focused are CSS; Disabled is the disabled attribute.
Storybook: Inputs/Slider.

Props

Prop	Type	Notes
`value`	`number`
`label`	`ReactNode`
`showValue`	`boolean`
`disabled`	native attribute
`aria-label`	`string`
`aria-labelledby`	`string`

Other props

Prop	Type	What it does
`defaultValue`	`number`
`min`	`number`
`max`	`number`
`step`	`number`
`formatValue`	`(value: number) => string`	Turn the number into text, e.g. `(v) =>` ${v}%. Also used for `aria-valuetext`.
`onValueChange`	`(value: number) => void`

States. Built on a native range input. The Figma Value axis (25, 50, 75) is just the value prop; the thumb and fill follow it. Hover and Focused are CSS; Disabled is the disabled attribute.

Native attributes such as className, id and data-* are forwarded to the root element.

Use it when

Coarse adjustment where exact precision is not required

Do not use it when

Precise numeric entry (use Text Field)

Rules for agents

Every Slider has a visible label (or aria-label)
Set min, max and step to real, meaningful values
Pass formatValue when the number needs a unit, such as (v) => ${v}%; it is also announced as aria-valuetext
Control it with value and onValueChange, and apply expensive changes when the user stops moving rather than on every step
Offer a Text Field next to it when people may need an exact value

Avoid

A Slider for precise numbers such as prices or quantities (use Text Field)
A Slider with only two or three possible values (use Radio or a Switch)
Showing a number without its unit
A step so small that keyboard users need hundreds of key presses

Writing the content

Labels name the setting: 'Volume', 'Price range'
Use sentence case

Keyboard

Left/Down decrease
Right/Up increase
Home/End jump to min/max
Page Up/Down large steps

Accessibility

aria-valuemin, aria-valuemax, aria-valuenow
aria-valuetext when the number needs units
aria-label or visible label

Colour tokens it reads

color.bg.brand.defaultcolor.bg.brand.subtlecolor.bg.disabledcolor.bg.mutedcolor.bg.surfacecolor.border.brandcolor.border.focuscolor.border.strongcolor.border.subtlecolor.text.disabledcolor.text.primarycolor.text.secondary

inputs 12 Figma variants Try it in the live demo