Slider

1"use client";
2 
3import "./slider.css";
4import { Slider as BaseSlider } from "@base-ui/react/slider";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { SliderContext, useSliderContext } from "./slider.context";
9import { sliderVariants, type SliderVariants } from "./slider.variants";
10 
11export type SliderProps = SliderVariants & React.ComponentProps<typeof BaseSlider.Root>;
12 
13export const SliderRoot = ({ children, className, size, ...props }: SliderProps) => {
14  const slots = sliderVariants({ size });
15 
16  return (
17    <SliderContext.Provider value={{ slots }}>
18      <BaseSlider.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseSlider.Root>
21    </SliderContext.Provider>
22  );
23};
24 
25export type SliderLabelProps = React.ComponentProps<typeof BaseSlider.Label>;
26 
27export const SliderLabel = ({ className, ...props }: SliderLabelProps) => {
28  const { slots } = useSliderContext();
29  return <BaseSlider.Label className={cn(slots.label(), className)} {...props} />;
30};
31 
32export type SliderValueProps = React.ComponentProps<typeof BaseSlider.Value>;
33 
34export const SliderValue = ({ className, ...props }: SliderValueProps) => {
35  const { slots } = useSliderContext();
36  return <BaseSlider.Value className={cn(slots.value(), className)} {...props} />;
37};
38 
39export type SliderControlProps = React.ComponentProps<typeof BaseSlider.Control>;
40 
41export const SliderControl = ({ className, ...props }: SliderControlProps) => {
42  const { slots } = useSliderContext();
43  return <BaseSlider.Control className={cn(slots.control(), className)} {...props} />;
44};
45 
46export type SliderTrackProps = React.ComponentProps<typeof BaseSlider.Track>;
47 
48export const SliderTrack = ({ className, ...props }: SliderTrackProps) => {
49  const { slots } = useSliderContext();
50  return <BaseSlider.Track className={cn(slots.track(), className)} {...props} />;
51};
52 
53export type SliderIndicatorProps = React.ComponentProps<typeof BaseSlider.Indicator>;
54 
55export const SliderIndicator = ({ className, ...props }: SliderIndicatorProps) => {
56  const { slots } = useSliderContext();
57  return <BaseSlider.Indicator className={cn(slots.indicator(), className)} {...props} />;
58};
59 
60export type SliderThumbProps = React.ComponentProps<typeof BaseSlider.Thumb>;
61 
62export const SliderThumb = ({ className, ...props }: SliderThumbProps) => {
63  const { slots } = useSliderContext();
64  return <BaseSlider.Thumb className={cn(slots.thumb(), className)} {...props} />;
65};