Slider component
Slider
Installation
npx shadcn@latest add @caprice/slidernpm install @caprice-ui/reactInstall the following dependencies:
npm install @base-ui/react lucide-reactAdd a cn helper
import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const { compose, cva, cx: cn,} = defineConfig({ hooks: { onComplete: (className: string) => twMerge(className), },});export type { VariantProps };Copy and paste the following code into your project.
import { Slider as SliderPrimitive } from '@base-ui/react/slider';import type * as React from 'react';/** * Groups all parts of the slider. * Renders a `<div>` element. * * Documentation: [Caprice UI Slider](https://caprice-ui.com/docs/components/slider) * * API Reference: [Base UI Slider](https://base-ui.com/react/components/slider#root) */export namespace Slider { export type State = SliderPrimitive.Root.State; export type Props = React.ComponentProps<typeof SliderPrimitive.Root>; export type ChangeEventDetails = SliderPrimitive.Root.ChangeEventDetails; export type ChangeEventReason = SliderPrimitive.Root.ChangeEventReason; export type CommitEventDetails = SliderPrimitive.Root.CommitEventDetails; export type CommitEventReason = SliderPrimitive.Root.CommitEventReason;}export function Slider({ ...props }: Slider.Props) { return ( <SliderPrimitive.Root data-slot="slider" {...props}> <SliderPrimitive.Value data-slot="slider-value" /> <SliderPrimitive.Control data-slot="slider-control"> <SliderPrimitive.Track data-slot="slider-track"> <SliderPrimitive.Indicator data-slot="slider-indicator" /> <SliderPrimitive.Thumb data-slot="slider-thumb" /> </SliderPrimitive.Track> </SliderPrimitive.Control> </SliderPrimitive.Root> );}Update the import paths to match your project setup.
Usage
import { Slider } from "@/components/caprice-ui/slider"import { Slider } from "@caprice-ui/react/slider"