Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Slider
An input where the user selects a value from within a given range.
import { Slider } from "@/components/ui/slider";
export default function Particle() {
return <Slider defaultValue={50} />;
}
Installation
pnpm dlx shadcn@latest add @coss/slider
Usage
import { Slider, SliderValue } from "@/components/ui/slider"<Slider />API Reference
Slider
Root component. Styled wrapper for Slider.Root from Base UI with default min/max values and edge-aligned thumbs.
| Prop | Type | Default | Description |
|---|---|---|---|
min | number | 0 | Minimum value of the slider |
max | number | 100 | Maximum value of the slider |
Note: The component sets thumbAlignment="edge" by default, which aligns thumbs to the edge of the track rather than centering them.
SliderValue
Displays the current value. Styled wrapper for Slider.Value from Base UI.
Examples
For accessible labelling and validation, prefer using the Field component to wrap checkboxes. See the related example: Slider field.
With Label and Value
import { Label } from "@/components/ui/label";
import { Slider, SliderValue } from "@/components/ui/slider";
export default function Particle() {
return (
<Slider defaultValue={50}>
<div className="mb-2 flex items-center justify-between gap-1">
<Label className="font-medium text-sm">Opacity</Label>
<SliderValue />
</div>
</Slider>
);
}
Range Slider
import { Slider } from "@/components/ui/slider";
export default function Particle() {
return <Slider defaultValue={[25, 75]} />;
}
Vertical
import { Slider } from "@/components/ui/slider";
export default function Particle() {
return <Slider defaultValue={50} orientation="vertical" />;
}
Form Integration
"use client";
import type { FormEvent } from "react";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
Field,
FieldDescription,
FieldLabel,
} from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Slider, SliderValue } from "@/components/ui/slider";
export default function Particle() {
const [loading, setLoading] = useState<boolean>(false);
const [value, setValue] = useState<number | readonly number[]>([25, 75]);
const onSubmit = async (e: FormEvent<HTMLFormElement>) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
setLoading(true);
await new Promise((r) => setTimeout(r, 800));
setLoading(false);
const volumes = formData.getAll("volume");
alert(`Volume: ${volumes.join(", ")}`);
};
return (
<Form onSubmit={onSubmit}>
<Field className="items-stretch gap-3" name="volume">
<Slider disabled={loading} onValueChange={setValue} value={value}>
<div className="mb-2 flex items-center justify-between gap-1">
<FieldLabel>Volume</FieldLabel>
<SliderValue />
</div>
</Slider>
<FieldDescription>Choose a value between 0 and 100</FieldDescription>
</Field>
<Button disabled={loading} type="submit">
Submit
</Button>
</Form>
);
}