wedding-planner-frontend/app/ui/components/form/affinitySlider.tsx

import { Slider } from 'primereact/slider';

export default function AffinitySlider({value , onChange }: { value: number, onChange: (value: number) => void }) {

  const label = (value: number) => {
    if (value < 0.2) {
      return 'Nemesis';
    } else if (value < 0.5) {
      return 'Enemies';
    } else if (value < 0.9) {
      return 'Bad vibes';
    } else if (value < 1.1) {
      return 'Neutral';
    } else if (value < 1.5) {
      return 'Good vibes';
    } else if (value < 1.8) {
      return 'Good friends';
    } else {
      return 'Besties';
    }
  }

  return (
    <>
      <Slider value={value} min={0} max={2} step={.1} onChange={(e) =>onChange(e.value)} className='w-80 bg-gray-400' />
      <span className="px-4 w-1/5">
        { label(value) }
      </span>
    </>
  )
}