title: In react, how to change the color of a range slider based on the value?
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var slider = document.getElementById("myRange");
  var output = document.getElementById("demo");
  output.innerHTML = slider.value;
  
  slider.oninput = function() {
    output.innerHTML = this.value;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slidecontainer {
    width: 100%;
  }
  
  .slider {
    -webkit-appearance: none;
    width: 100%;
    height: 15px;
    border-radius: 5px;
    background: #d3d3d3;
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
  }
  
  .slider:hover {
    opacity: 1;
  }
  
  .slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #04AA6D;
    cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #04AA6D;
    cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Round Range Slider&lt;/h1&gt;
  
  &lt;div class="slidecontainer"&gt;
    &lt;input type="range" min="1" max="100" value="50" class="slider" id="myRange" style="width: 200px"&gt;
    &lt;p&gt;Value: &lt;span id="demo"&gt;&lt;/span&gt;&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>The code above is a range slider made in HTML.</p>
  <p>In react, how can I create one where if the value is less than 50, then the left side of the slider is blue. and if the the value is greater than 50, then the right side of the slider would be the color purple?</p>