edr-platform/apps/edr-freight-web/backoffice/src/shared/common/ui/SliderUI.tsx

import { FC } from "react";
// @ts-ignore - Module types not available
import * as SliderPrimitive from "@radix-ui/react-slider";

interface SliderUIProps {
  id?: string;
  label: string;
  description?: string;
  value: number[];
  onChange: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  required?: boolean;
  disabled?: boolean;
}

export const SliderUI: FC<SliderUIProps> = ({
  id,
  label,
  description,
  value,
  onChange,
  min = 0,
  max = 100,
  step = 1,
  required = false,
  disabled = false,
}) => {
  return (
    <div className="space-y-2">
      <label htmlFor={id} className="block text-sm font-medium">
        {label} {required && <span className="text-red-500">*</span>}
      </label>
      {description && <p className="text-xs text-gray-500">{description}</p>}
      <SliderPrimitive.Root
        id={id}
        value={value}
        onValueChange={(val: number[]) => onChange(val[0])}
        min={min}
        max={max}
        step={step}
        disabled={disabled}
        className="relative flex w-full touch-none select-none items-center h-5">
        <SliderPrimitive.Track className="relative bg-gray-200 flex-1 h-1 rounded-full">
          <SliderPrimitive.Range className="absolute bg-primary-500 h-full rounded-full" />
        </SliderPrimitive.Track>
        <SliderPrimitive.Thumb className="block w-5 h-5 bg-white border border-gray-300 rounded-full shadow" />
      </SliderPrimitive.Root>
      <div className="text-sm text-gray-600 text-center">{value}</div>
    </div>
  );
};