Slider

A single-value range control built on a native <input type="range">, paired with a track that draws its own background rail and a live fill bar.

Equalizer

Gain in decibels, −12 to +12.

60Hz

250Hz

-2

1kHz

4kHz

12kHz

View code

let gains = { "60": 4, "250": 1, "1k": -2, "4k": 2, "12k": 5 };

<Card>
	<Card.Header>
		<Card.Title>Equalizer</Card.Title>
		<Card.Description>Gain in decibels, −12 to +12.</Card.Description>
	</Card.Header>
	<Card.Content>
		{bands.map((band) => (
			<Slider
				key={band.id}
				orientation="vertical"
				min={-12}
				max={12}
				value={gains[band.id]}
				mix={[on<HTMLDivElement, "input">("input", (event) => readGain(band.id, event))]}
			>
				<Slider.Output>{formatGain(gains[band.id])}</Slider.Output>
				<Slider.Track>
					<Slider.Thumb aria-label={`Gain at ${band.label}`} />
				</Slider.Track>
				<Text>{band.label}</Text>
			</Slider>
		))}
	</Card.Content>
</Card>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Slider } from "@sdxc/ui";

Renders the root host: a <div> stacking its children, growing to fill the inline axis by default or a fixed block axis when vertical. Resolves the range, value, orientation, and thumb id into context for nested parts.

Composition

The parts the component publishes, each a static property of the host.

Slider
Slider.TrackRenders the visual track: a position: relative <div> that draws a rail and fill bar as pseudo-elements sized from context's resolved value, and overlays a nested Slider.Thumb so native drag spans its full length.
Slider.ThumbRenders the interactive thumb: a native <input type="range"> reset to cover Slider.Track's full box so native drag and keyboard control span its whole length, rotating with writing-mode when vertical.
Slider.OutputRenders a live readout: a native <output> associated by default with the nearest ancestor Slider's thumb via htmlFor, so assistive technology knows which control it reports on.

Examples

<Slider orientation="vertical" min={0} max={10} defaultValue={6}>
	<Slider.Track>
		<Slider.Thumb aria-label={t("equalizer.band", { hz: 250 })} />
	</Slider.Track>
</Slider>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`orientation?`	`"horizontal" \| "vertical"`	Layout axis. Defaults to DEFAULT_ORIENTATION.
`min?`	`number`	Lower bound of the range. Defaults to DEFAULT_MIN.
`max?`	`number`	Upper bound of the range. Defaults to DEFAULT_MAX.
`value?`	`number`	Current value, for a slider whose value the consumer tracks itself.
`defaultValue?`	`number`	Starting value, for a slider that never tracks its own value.

Also accepts everything in TagProps<"div">.

Slider.Track

Also accepts everything in TagProps<"div">.

Slider.Thumb

Also accepts everything in Omit<TagProps<"input">, "type" | "role">.

Slider.Output

Also accepts everything in TagProps<"output">.

Types

Name	Values	What it decides
`Orientation`	`"horizontal" \| "vertical"`	Axis the track's fill bar and thumb travel along: a full-width row, or a full-height column.