A styled native range input with a filled track and live value readout.
DefaultFormatted valueDisabled
<Slider bind:value min={0} max={100} formatValue={(v) => `${v}%`} />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { Slider } from '@chanrg/4ui';<Slider bind:value min={0} max={100} formatValue={(v) => `${v}%`} />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number ($bindable) | 0 | Current value. |
min / max / step | number | 0 / 100 / 1 | Range. |
formatValue | (value) => string | String(value) | Readout formatter. |
showValue | boolean | true | Show the readout. |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Native range input: arrows, Home/End, and screen-reader value reporting built in.