Slider

An input where the user selects a value from within a given range.

1
import { Slider } from "@/components/ui/pxl/slider";
2

3
export default function SliderDemo() {
4
  return <Slider className="w-full max-w-md" defaultValue={[50]} />;
5
}

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/slider

Install the following dependencies:

pnpm add @base-ui/react

Copy and paste the following code into your project.

1
import { Slider as SliderPrimitive } from "@base-ui/react/slider";
2
import { cva, type VariantProps } from "class-variance-authority";
3

4
import { cn } from "@/lib/utils";
5

6
const sliderVariants = cva("data-horizontal:w-full data-vertical:h-full", {
7
  variants: {
8
    variant: {
9
      default:  "**:data-[slot=slider-range]:bg-foreground          **:data-[slot=slider-thumb]:bg-background **:data-[slot=slider-thumb]:pixel-color-input   **:data-[slot=slider-thumb]:hover:pixel-color-ring                **:data-[slot=slider-thumb]:focus-visible:pixel-color-ring                **:data-[slot=slider-thumb]:active:pixel-color-ring",
10
      primary:  "**:data-[slot=slider-range]:bg-primary-foreground  **:data-[slot=slider-thumb]:bg-background **:data-[slot=slider-thumb]:pixel-color-primary **:data-[slot=slider-thumb]:hover:pixel-color-primary-foreground  **:data-[slot=slider-thumb]:focus-visible:pixel-color-primary-foreground  **:data-[slot=slider-thumb]:active:pixel-color-primary-foreground",
11
      success:  "**:data-[slot=slider-range]:bg-success-foreground  **:data-[slot=slider-thumb]:bg-background **:data-[slot=slider-thumb]:pixel-color-success **:data-[slot=slider-thumb]:hover:pixel-color-success-foreground  **:data-[slot=slider-thumb]:focus-visible:pixel-color-success-foreground  **:data-[slot=slider-thumb]:active:pixel-color-success-foreground",
12
      danger:   "**:data-[slot=slider-range]:bg-danger-foreground   **:data-[slot=slider-thumb]:bg-background **:data-[slot=slider-thumb]:pixel-color-danger  **:data-[slot=slider-thumb]:hover:pixel-color-danger-foreground   **:data-[slot=slider-thumb]:focus-visible:pixel-color-danger-foreground   **:data-[slot=slider-thumb]:active:pixel-color-danger-foreground",
13
      warning:  "**:data-[slot=slider-range]:bg-warning-foreground  **:data-[slot=slider-thumb]:bg-background **:data-[slot=slider-thumb]:pixel-color-warning **:data-[slot=slider-thumb]:hover:pixel-color-warning-foreground  **:data-[slot=slider-thumb]:focus-visible:pixel-color-warning-foreground  **:data-[slot=slider-thumb]:active:pixel-color-warning-foreground",
14
      info:     "**:data-[slot=slider-range]:bg-info-foreground     **:data-[slot=slider-thumb]:bg-background **:data-[slot=slider-thumb]:pixel-color-info    **:data-[slot=slider-thumb]:hover:pixel-color-info-foreground     **:data-[slot=slider-thumb]:focus-visible:pixel-color-info-foreground     **:data-[slot=slider-thumb]:active:pixel-color-info-foreground",
15
    },
16
  },
17
  defaultVariants: {
18
    variant: "default",
19
  },
20
});
21

22
function Slider({
23
  className,
24
  defaultValue,
25
  value,
26
  variant = "default",
27
  min = 0,
28
  max = 100,
29
  ...props
30
}: SliderPrimitive.Root.Props & VariantProps<typeof sliderVariants>) {
31
  const _values = Array.isArray(value)
32
    ? value
33
    : Array.isArray(defaultValue)
34
      ? defaultValue
35
      : [min, max];
36

37
  return (
38
    <SliderPrimitive.Root
39
      className={cn(sliderVariants({ variant }), className)}
40
      data-slot="slider"
41
      defaultValue={defaultValue}
42
      value={value}
43
      min={min}
44
      max={max}
45
      thumbAlignment="edge"
46
      {...props}
47
    >
48
      <SliderPrimitive.Control className="relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col">
49
        <SliderPrimitive.Track
50
          data-slot="slider-track"
51
          className="relative grow overflow-hidden pixel-rounded pixel-size-sm bg-muted select-none data-horizontal:h-1.5 data-horizontal:w-full data-vertical:h-full data-vertical:w-1.5"
52
        >
53
          <SliderPrimitive.Indicator
54
            data-slot="slider-range"
55
            className="select-none data-horizontal:h-full data-vertical:w-full"
56
          />
57
        </SliderPrimitive.Track>
58
        {Array.from({ length: _values.length }, (_, index) => (
59
          <SliderPrimitive.Thumb
60
            data-slot="slider-thumb"
61
            key={index.toString()}
62
            className="block size-3.5 shrink-0 pixel-border pixel-size-md shadow-xs transition-colors select-none focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
63
          />
64
        ))}
65
      </SliderPrimitive.Control>
66
    </SliderPrimitive.Root>
67
  );
68
}
69

70
export { Slider };

Update the import paths to match your project setup.

Usage

import { Slider } from "@/components/ui/pxl/slider"

<Slider defaultValue={[33]} max={100} step={1} />

Variants

Use the variant prop to change the colors of the slider.

1
import { Slider } from "@/components/ui/pxl/slider";
2

3
export default function SliderVariantsExample() {
4
  return (
5
    <div className="flex flex-col gap-8 w-full max-w-md">
6
      <Slider variant="primary" defaultValue={[50]} />
7
      <Slider variant="success" defaultValue={[50]} />
8
      <Slider variant="danger" defaultValue={[50]} />
9
      <Slider variant="warning" defaultValue={[50]} />
10
      <Slider variant="info" defaultValue={[50]} />
11
    </div>
12
  );
13
}

Range

Use an array with two values for a range slider.

Multiple Thumbs

Use an array with multiple values for multiple thumbs.

Vertical

Use orientation="vertical" for a vertical slider.

Disabled

Use the disabled prop to disable the slider.

API Reference

See the Base UI Slider documentation.