portainer/app/react/components/form-components/Slider/SliderWithInput.tsx

import { Input } from '../Input';

import { Slider } from './Slider';

export function SliderWithInput({
  value,
  onChange,
  max,
  min = 0,
  step = 1,
  dataCy,
  visibleTooltip = false,
}: {
  value: number;
  onChange: (value: number) => void;
  max: number;
  min?: number;
  dataCy: string;
  step?: number;
  visibleTooltip?: boolean;
}) {
  return (
    <div className="flex items-center gap-4">
      {max && (
        <div className="mr-2 flex-1">
          <Slider
            onChange={(value) =>
              onChange(typeof value === 'number' ? value : value[0])
            }
            value={value}
            min={min}
            max={max}
            step={step}
            dataCy={`${dataCy}Slider`}
            visibleTooltip={visibleTooltip}
          />
        </div>
      )}
      <Input
        type="number"
        min="0"
        max={max}
        value={value}
        onChange={({ target: { valueAsNumber: value } }) =>
          onChange(Number.isNaN(value) ? 0 : value)
        }
        className="w-32"
        data-cy={`${dataCy}Input`}
      />
    </div>
  );
}