Slider

A 320px track for choosing a value, or two thumbs for choosing a span, with the label, (Optional) and the amount above it.

Label(Optional)

import { Slider } from '@orvain/react';
 
<Slider label="Volume" min={0} max={100} step={5} value={volume} onValueChange={setVolume} showValue />

Add an Orvain Slider labelled “Label” with the sub-label “(Optional)”, at 0, no tooltip.

Orvain MCPIncluded with the library

When to use#

For values where approximate position matters more than the exact number: volume, a price range, a zoom level.
The Range Slider for filters with a minimum and a maximum.

When not to use

Use an Input for exact values such as a quantity or an age.

Anatomy#

1Header

Label, (Optional) and the amount on the right, Satoshi 12/1.5, 4px above the track.

2Track

6px tall, fully round, #f2f2f2.

3Fill

The chosen part of the track in #005cf8.

4Thumb

A 16px white disc with a 6px centre, blue once the value leaves the start; a 24px hit area.

5Tooltip

Optional: the value in a dark bubble 3px above the thumb.

States#

Percentage

Figma draws 0, 25, 50, 75 and 100%; any step between works.

Left Range and Right Range

The two ends of a Range Slider; the thumbs cannot cross.

At the start

The thumb's centre stays grey until the value moves.

Disabled

Faded to 40% and inert (the library's; Figma draws none).

Source#

Preview – final code pending

The Slider is available in the Figma library with every variant and state shown above. The React and Vue source, props table and install command will be added to this page when the code library is released.

Get notified when the source is published Get notified when the source is published

Used in these blocks

sliders filters