Slider

Installation#

1. Install the dependencies

   npm install cn radix-ui

2. Copy the source into your project

   components/ui/slider.tsx

   "use client"import * as React from "react"import { cn } from "cn"import { Slider as SliderPrimitive } from "radix-ui"function Slider({  className,  defaultValue,  value,  min = 0,  max = 100,  ...props}: React.ComponentProps<typeof SliderPrimitive.Root>) {  const _values = React.useMemo(    () =>      Array.isArray(value)        ? value        : Array.isArray(defaultValue)          ? defaultValue          : [min, max],    [value, defaultValue, min, max]  )  return (    <SliderPrimitive.Root      data-slot="slider"      defaultValue={defaultValue}      value={value}      min={min}      max={max}      className={cn(        "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",        className      )}      {...props}    >      <SliderPrimitive.Track        data-slot="slider-track"        className="relative grow overflow-hidden rounded-full bg-muted data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1"      >        <SliderPrimitive.Range          data-slot="slider-range"          className="absolute bg-primary select-none data-horizontal:h-full data-vertical:w-full"        />      </SliderPrimitive.Track>      {Array.from({ length: _values.length }, (_, index) => (        <SliderPrimitive.Thumb          data-slot="slider-thumb"          key={index}          className="relative block size-3 shrink-0 rounded-full border border-ring bg-white ring-ring/50 transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"        />      ))}    </SliderPrimitive.Root>  )}export { Slider }

3. Make sure the foundation is in place

   Components read their colors, radius and surfaces from the tokens in app/globals.css. See Theming.

Usage#

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

Examples#