title: Trouble working with classList add and remove in react
body: <p>In my component, I have the <code>useEffect</code> hook adding event listeners to the range function, in order to chage the color of the slider. I can only get pink to work all over the place, and blue at the wrong end of the slider.</p>
  
  <p>In the console.log(), I'm seeing all the classes listed, but only pink seems to work. Thank you.</p>
  
  <h2>component</h2>
  
  <pre><code>  const range = (r) =&gt; {
      // move gradient
      r.addEventListener('input', () =&gt; {
        // Change slide thumb color on way up
        if (r.value &gt; r.max * 0.20) {
          r.classList.add('pink')
        }
        if (r.value &gt; r.max * 0.40) {
          r.classList.add('purple')
        }
        if (r.value &gt; r.max * 0.60) {
          r.classList.add('ltpurple')
        }
        if (r.value &gt; r.max * 0.80) {
          r.classList.add('blue')
        }
  
        // Change slide thumb color on way down
        if (r.value &lt; r.max * 0.20) {
          r.classList.remove('pink')
        }
        if (r.value &lt; r.max * 0.40) {
          r.classList.remove('purple')
        }
        if (r.value &lt; r.max * 0.60) {
          r.classList.remove('ltpurple')
        }
        if (r.value &lt; r.max * 0.80) {
          r.classList.remove('blue')
        }
        // window.requestAnimationFrame(r)
        console.log(r.classList)
      })
    }
  
    useEffect(() =&gt; {
      Array.from(document.getElementsByClassName('range')).map(r =&gt; range(r))
    })
  </code></pre>
  
  <h2>JSX</h2>
  
  <pre><code>  &lt;div className="row"&gt;
          &lt;h3&gt;Grooming&lt;/h3&gt;
          &lt;p&gt;Care and health: hair, ears, mouth, nose, lips, face, hands, nails, feet, toes.&lt;/p&gt;
          &lt;input type="range" className="range blue"
            min={0} max={100} name="grooming" onBlur={handleBlur} /&gt;
          &lt;p&gt;Well groomed: hair, nails, ears, face, hands.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div className="row"&gt;
          &lt;h3&gt;Hygiene&lt;/h3&gt;
          &lt;p&gt;Hygiene education and awareness. Routine and other daily practices.&lt;/p&gt;
          &lt;input type="range" className="range blue" onBlur={handleBlur}
            min={0} max={100} name="hygiene" /&gt;
          &lt;p&gt;Demonstrates appropriate hygiene practices.&lt;/p&gt;
        &lt;/div&gt;
  </code></pre>