Forms

Slider.

A continuous value with a visible result.

LIVE PREVIEWTry it. It works.
65

Usage

React / TypeScript
<Slider label="Volume" min={0} max={100} defaultValue={40} />

Import components from @bld8/ui and include @bld8/ui/styles.css once. Wrap the application in UIProvider.

API & behaviour

Native range input with linked label and output. Supports min, max, step, value/onChange, defaultValue, disabled and name. Use arrow keys for fine adjustment.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.