Slider

Preview

import { Slider } from "@/components/ui/Slider";

export function SliderDemo() {
  return (
  <div className="w-64 p-4">
    <Slider defaultValue={[50]} max={100} step={1} />
  </div>
)

Installation

Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces

pnpm dlx shadcn@latest add @aura/slider

Manual

Install the following dependencies:

pnpm install radix-ui

Copy and paste the class names utility into your utils/class-names.ts file.

import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

Copy and paste the Slider component into your components/ui/Slider.tsx file.

"use client"
/**
 * @description An input where the user selects a value from within a given range.
 */
import * as React from "react"
import { Slider as SliderPrimitive } from "radix-ui"

import { cn } from "@/utils/class-names"

const Slider = React.forwardRef<
    React.ElementRef<typeof SliderPrimitive.Root>,
    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
>(({ className, ...props }, ref) => (
    <SliderPrimitive.Root
        ref={ref}
        className={cn(
            "relative flex w-full touch-none select-none items-center",
            className
        )}
        {...props}
    >
        <SliderPrimitive.Track className="relative h-0.5 w-full grow overflow-hidden rounded-full bg-gray-3">
            <SliderPrimitive.Range className="absolute h-full bg-gray-12" />
        </SliderPrimitive.Track>
        <SliderPrimitive.Thumb className="block size-1.5 rounded-full border border-gray-12 bg-gray-1 ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
    </SliderPrimitive.Root>
))
Slider.displayName = SliderPrimitive.Root.displayName

export { Slider }

Usage

Disabled

export const Disabled = () => (
  <div className="w-64 p-4">
    <Slider defaultValue={[25]} max={100} step={1} disabled />
  </div>
)

WithSteps

export const WithSteps = () => (
  <div className="w-64 p-4">
    <Slider defaultValue={[33]} max={100} step={33} />
  </div>
)