Slider

Examples are the tab where the component is shown doing a job, not demonstrating a prop. The API tab already lists the props.

Press Compare. The frames are real viewports, so a layout that breaks at 320 breaks here too rather than in somebody's hands.

In a page

import { useState } from "react";
import { Slider, Switch } from "@sushindustries/ui";

export function PlaybackSettings() {
	const [volume, setVolume] = useState(70);

	return (
		<form className="flex flex-col gap-4">
			<Slider
				label="Volume"
				min={0}
				max={100}
				value={volume}
				onChange={(event) => setVolume(Number(event.target.value))}
			/>
			<Switch label="Smooth scrolling" defaultChecked />
		</form>
	);
}

What this example is not

onChange here reads event.target.value as a string and converts it - that conversion is the caller's job for every native range input, not something SliderSliderA native range input with its label - keyboard steps and form value ship in the element.@sushindustries/ui · content does for you.