pizza-online

1
'use client'
2

3
import React from 'react'
4
import * as SliderPrimitive from '@radix-ui/react-slider'
5

6
import {cn} from '@/lib/utils'
7

8
type SliderProps = {
9
  className?: string
10
  min: number
11
  max: number
12
  step: number
13
  formatLabel?: (value: number) => string
14
  value?: number[] | readonly number[]
15
  onValueChange?: (values: number[]) => void
16
}
17

18
const RangeSlider = React.forwardRef(
19
  ({className, min, max, step, formatLabel, value, onValueChange, ...props}: SliderProps, ref) => {
20
    const initialValue = Array.isArray(value) ? value : [min, max]
21
    const [localValues, setLocalValues] = React.useState(initialValue)
22

23
    React.useEffect(() => {
24
      // Update localValues when the external value prop changes
25
      setLocalValues(Array.isArray(value) ? value : [min, max])
26
    }, [min, max, value])
27

28
    const handleValueChange = (newValues: number[]) => {
29
      setLocalValues(newValues)
30
      if (onValueChange) {
31
        onValueChange(newValues)
32
      }
33
    }
34

35
    return (
36
      <SliderPrimitive.Root
37
        ref={ref as React.RefObject<HTMLDivElement>}
38
        min={min}
39
        max={max}
40
        step={step}
41
        value={localValues}
42
        onValueChange={handleValueChange}
43
        className={cn('relative flex w-full touch-none select-none mb-6 items-center', className)}
44
        {...props}
45
      >
46
        <SliderPrimitive.Track className='relative h-1 w-full grow overflow-hidden rounded-full bg-primary/20'>
47
          <SliderPrimitive.Range className='absolute h-full bg-primary' />
48
        </SliderPrimitive.Track>
49
        {localValues.map((value, index) => (
50
          <React.Fragment key={index}>
51
            <div
52
              className='absolute text-center'
53
              style={{
54
                left: `calc(${((value - min) / (max - min)) * 100}% + 0px)`,
55
                top: `10px`,
56
              }}
57
            >
58
              <span className='text-sm'>{formatLabel ? formatLabel(value) : value}</span>
59
            </div>
60
            <SliderPrimitive.Thumb className='block h-4 w-4 rounded-full border border-primary/50 bg-white shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50' />
61
          </React.Fragment>
62
        ))}
63
      </SliderPrimitive.Root>
64
    )
65
  }
66
)
67

68
RangeSlider.displayName = SliderPrimitive.Root.displayName
69

70
export {RangeSlider}
71