Slider
A fader with a milled channel, an embossed accent fill, and a thumb that lifts to a higher elevation while dragged.
@emboss/slider
Installation
pnpm dlx shadcn@latest add @emboss/sliderUsage
import { Slider } from "@/components/ui/slider";
export function Example() {
return <Slider aria-label="Output gain" defaultValue={62} />;
}API reference
Slider
Single-value slider. The accessible name belongs to the thumb, which wraps a native range input.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue / onValueChange | number / number / (value) => void | — | Controlled and uncontrolled usage. |
| min / max / step | number / number / number | 0 / 100 / 1 | Range and keyboard step. |
| orientation | "horizontal" | "vertical" | "horizontal" | Fader direction. |
| Data attribute | Description |
|---|---|
| data-dragging | Present on the thumb while it is being dragged. |
Keyboard
| Keys | Action |
|---|---|
| ArrowLeftArrowRight | Adjusts by one step. |
| Home | Jumps to the minimum. |
| End | Jumps to the maximum. |
Source
View source — slider.tsxHide source — slider.tsx
"use client";
import { Slider as BaseSlider } from "@base-ui/react/slider";
import { cn } from "@/lib/utils";
export type SliderProps = React.ComponentProps<typeof BaseSlider.Root>;
/**
* A fader: a milled channel with an embossed fill and a thumb that lifts
* while dragged. The accessible name belongs to the thumb — the element
* that takes focus and carries the slider role.
*
* @example
* <Slider defaultValue={-12} min={-60} max={6} aria-label="Output gain" />
*/
function Slider({
className,
"aria-label": ariaLabel,
"aria-labelledby": ariaLabelledby,
...props
}: SliderProps) {
return (
<BaseSlider.Root
data-slot="slider"
className={cn("w-full", className)}
{...props}
>
<BaseSlider.Control
data-slot="slider-control"
className="flex w-full touch-none items-center py-2 select-none data-[orientation=vertical]:h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:px-2 data-[orientation=vertical]:py-0"
>
<BaseSlider.Track
data-slot="slider-track"
className="h-1.5 w-full rounded-full bg-well-deep shadow-deboss-2 select-none data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
>
<BaseSlider.Indicator
data-slot="slider-indicator"
className="rounded-full bg-accent shadow-emboss-1 select-none"
/>
<BaseSlider.Thumb
data-slot="slider-thumb"
aria-label={ariaLabel}
aria-labelledby={ariaLabelledby}
className="size-4.5 rounded-full bg-surface-3 shadow-emboss-2 focus-ring transition-[box-shadow,scale] duration-(--duration-press) ease-(--ease-press) select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-dragging:scale-110 data-dragging:shadow-emboss-3"
/>
</BaseSlider.Track>
</BaseSlider.Control>
</BaseSlider.Root>
);
}
export { Slider };