ReactSlider
A bounded numeric value with keyboard controls and a visible output.
Give your AI assistant this page as context.
Connect your library with MCPui/sliderUsage
Get this component from a saved library export or the connected CLI. The imports below refer to local files installed in your app.
Import styles/components.css, then styles/theme.css once. Wrap your app in ThemeScope from components/ui/utils so typography, focus and overlays share the theme. The installation guide covers runtime dependencies and React/Next.js setup.
import { Slider } from './components/ui/slider';
<Slider label="Volume" defaultValue={40} min={0} max={100}/>Design system
This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in Export.
Behavior and accessibility
- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.
Status: experimental during early access. Sample previews do not send emails, process payments or upload files to a service.
Source and props
This is the exported source, using the same implementation as the editor.
"use client";
import { Slider as Base } from "@base-ui/react/slider";
import { cx } from "./utils";
export type SliderProps<
Value extends number | readonly number[] = number | readonly number[],
> = Omit<Base.Root.Props<Value>, "className" | "children"> & {
label: string;
className?: string;
thumbLabels?: readonly string[];
};
export function Slider<Value extends number | readonly number[]>({
label,
className,
thumbLabels,
locale = "en-US",
...props
}: SliderProps<Value>) {
const initialValue = props.value ?? props.defaultValue;
const thumbCount = Array.isArray(initialValue) ? initialValue.length : 1;
return (
<Base.Root
{...props}
locale={locale}
className={cx("cr-slider", className)}
>
<div className="cr-row">
<Base.Label className="cr-label">{label}</Base.Label>
<Base.Value className="cr-description" />
</div>
<Base.Control className="cr-slider-control">
<Base.Track className="cr-slider-track">
<Base.Indicator className="cr-slider-indicator" />
{Array.from({ length: thumbCount }, (_, index) => (
<Base.Thumb
key={index}
index={index}
className="cr-slider-thumb"
aria-label={
thumbLabels?.[index] ??
(thumbCount === 1
? label
: `${label}, ${index + 1} of ${thumbCount}`)
}
/>
))}
</Base.Track>
</Base.Control>
</Base.Root>
);
}