FORMS · COMPONENT
Slider
Adjust a value with both a broad gesture and precise steps.
The preview couldn’t load. Try Reset preview, or open Code to use the example.
Loading the real component…
"use client";
import { useState } from "react";
import { Slider } from "@raydenui/ui";
import "@raydenui/ui/styles.css";
export default function Example({ state = "default" }: { state?: string }) {
const [value, setValue] = useState(60);
return <div style={{ width: "min(100%, 440px)", display: "grid", gap: 28 }}><h2 style={{ fontSize: 24 }}>Find the right balance.</h2><Slider label="Preview intensity" value={value} onChange={setValue} min={0} max={100} step={5} showPercentage disabled={state === "disabled"} metadata="Use the arrow keys for precise adjustments." /><p role="status">Intensity: {value}%</p></div>;
}
Live library components · illustrative demo data · no remote submissionsReset returns to the initial example.
Made for real interfaces.
A controlled slider adjusts an illustrative intensity value from zero to one hundred in steps of five. The visible summary follows its actual value.
Try it
Drag the thumb or focus it and use the arrow keys. Compare its disabled appearance.