| 'use client' |
|
|
| import { forwardRef, InputHTMLAttributes } from 'react' |
| import { cn } from '@/utils/helpers' |
|
|
| export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> { |
| label?: string |
| min: number |
| max: number |
| step?: number |
| value: number |
| onValueChange: (value: number) => void |
| showValue?: boolean |
| valueFormat?: (value: number) => string |
| } |
|
|
| export const Slider = forwardRef<HTMLInputElement, SliderProps>( |
| ({ className, label, min, max, step = 1, value, onValueChange, showValue = false, valueFormat, ...props }, ref) => { |
| const sliderId = label?.toLowerCase().replace(/\s+/g, '-') |
|
|
| return ( |
| <div className={cn('w-full', className)}> |
| {label && ( |
| <div className="flex items-center justify-between mb-1"> |
| <label htmlFor={sliderId} className="text-sm font-medium text-gray-700 dark:text-gray-300"> |
| {label} |
| </label> |
| {showValue && ( |
| <span className="text-sm text-gray-500 dark:text-gray-400 font-mono"> |
| {valueFormat ? valueFormat(value) : value} |
| </span> |
| )} |
| </div> |
| )} |
| <input |
| ref={ref} |
| id={sliderId} |
| type="range" |
| min={min} |
| max={max} |
| step={step} |
| value={value} |
| onChange={(e) => onValueChange(Number(e.target.value))} |
| className={cn( |
| 'w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer', |
| 'accent-blue-600 dark:bg-gray-700', |
| 'focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2', |
| 'disabled:cursor-not-allowed disabled:opacity-50' |
| )} |
| {...props} |
| /> |
| </div> |
| ) |
| } |
| ) |
|
|
| Slider.displayName = 'Slider' |
