"use client"; import { Slider as SliderPrimitive } from "@base-ui/react/slider"; import { cn } from "@/lib/utils"; type SliderProps = Omit< SliderPrimitive.Root.Props, "defaultValue" | "onValueChange" | "onValueCommitted" | "value" > & { defaultValue?: number[]; onValueChange?: (value: number[], eventDetails: unknown) => void; onValueCommit?: (value: number[], eventDetails: unknown) => void; onValueCommitted?: (value: number[], eventDetails: unknown) => void; value?: number[]; }; function Slider({ className, defaultValue, onValueChange, onValueCommit, onValueCommitted, value, min = 0, max = 100, ...props }: SliderProps) { const _values = Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max]; return ( { onValueChange?.([...nextValue], eventDetails); }} onValueCommitted={(nextValue, eventDetails) => { const values = [...nextValue]; onValueCommitted?.(values, eventDetails); onValueCommit?.(values, eventDetails); }} thumbAlignment="edge" value={value} {...props} > {Array.from({ length: _values.length }, (_, index) => ( ))} ); } export { Slider };

Slider

Installation

Usage

Examples

Default

Two Thumbs

Vertical

Controlled