Slider

1'use client';
2 
3import { Slider as SliderPrimitive } from '@base-ui/react/slider';
4import * as React from 'react';
5 
6import {
7  Tooltip,
8  TooltipContent,
9  TooltipTrigger,
10} from '@/components/ui/tooltip';
11import { cn } from '@/lib/utils';
12 
13type SliderRootProps = React.ComponentProps<typeof SliderPrimitive.Root>;
14 
15type SliderProps = Omit<
16  SliderRootProps,
17  'onValueChange' | 'onValueCommitted'
18> & {
19  showStepMarkers?: boolean;
20  showValueTooltip?: boolean;
21  showStepLabels?: boolean;
22  formatValue?: (value: number) => string;
23  onValueChange?: (value: number[]) => void;
24};
25 
26type Marker = { value: number; percentage: number };
27 
28const thumbClasses = cn(
29  'relative flex h-4 w-4 cursor-pointer items-center justify-center rounded-full',
30  'bg-fill-active shadow-none',
31  'transition-[box-shadow,outline-color,background-color] duration-200',
32  'focus-visible:outline focus-visible:outline-2 focus-visible:outline-stroke-primary',
33  'data-disabled:pointer-events-none data-disabled:bg-fill-onsurface-ui-2 data-disabled:shadow-elevation-0',
34);
35 
36const isValueInRange = (value: number, currentValues: number[]): boolean => {
37  if (currentValues.length === 1) {
38    return value <= currentValues[0];
39  }
40 
41  const [minVal, maxVal] = [
42    Math.min(...currentValues),
43    Math.max(...currentValues),
44  ];
45 
46  return value >= minVal && value <= maxVal;
47};
48 
49const generateMarkers = (
50  min: number,
51  max: number,
52  step: number | undefined,
53  showIntermediate: boolean,
54): Marker[] => {
55  const markers: Marker[] = [{ value: min, percentage: 0 }];
56 
57  if (showIntermediate && step && step > 0) {
58    for (let i = min + step; i < max; i += step) {
59      markers.push({ value: i, percentage: ((i - min) / (max - min)) * 100 });
60    }
61  }
62 
63  markers.push({ value: max, percentage: 100 });
64 
65  return markers;
66};
67 
68const StepMarker = React.memo(
69  ({
70    marker,
71    isActive,
72    isVertical,
73    showLabel,
74    disabled,
75  }: {
76    marker: Marker;
77    isActive: boolean;
78    isVertical: boolean;
79    showLabel: boolean;
80    disabled: boolean;
81  }) => {
82    const isMin = marker.percentage === 0;
83    const isMax = marker.percentage === 100;
84 
85    let labelColor = 'text-fg-tertiary';
86 
87    if (disabled) {
88      labelColor = 'text-fg-disabled';
89    } else if (isActive) {
90      labelColor = 'text-fg-primary';
91    }
92 
93    return (
94      <div
95        className={cn(
96          'pointer-events-none absolute flex items-center',
97          isVertical
98            ? 'left-1/2 -translate-x-1/2 flex-row'
99// … truncated