Slider
A value adjusted along a horizontal track.
Upstream documentationExamples
Example setting only
Installation
Run the Ninaero registry command to install the component and its dependencies, including shared theme styles.
Install Slider
pnpm dlx shadcn@latest add 'https://ninaero.pages.dev/r/slider.json'Usage
A complete example using the installed component and hook paths.
Slider usage
"use client";type PreviewProps = { interactive?: boolean };import { useId, useState } from "react";import { Label } from "@/components/ui/label";import { Slider } from "@/components/ui/slider";function SliderPreview({ interactive }: PreviewProps) { const id = useId(); const [value, setValue] = useState(40); return ( <div className="w-full max-w-64 space-y-3"> <Label id={id}>Volume: {value}%</Label> <Slider aria-labelledby={id} value={value} onValueChange={(next) => setValue(Array.isArray(next) ? next[0] : next)} /> {interactive && <p className="text-xs text-muted-foreground">Example setting only</p>} </div> );}export default function Demo() { return <SliderPreview interactive />;}API Reference
Ninaero exports and local defaults are listed below. See the upstream reference for inherited primitive props and additional composition examples.
Slider
Slider props
SliderPrimitive.Root.Props & Pick<SliderPrimitive.Thumb.Props, "getAriaLabel" | "getAriaValueText"> & { sound?: boolean; variant?: "default" | "simple"; }- min
- 0
- max
- 100
- variant
- "default"
- sound
- true