In react, how to change the color of a range slider based on the value?

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
.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;
}
<h1>Round Range Slider</h1>

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange" style="width: 200px">
  <p>Value: <span id="demo"></span></p>
</div>

The code above is a range slider made in HTML.

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?

Answer

This is how you’d do it in Reactjs:

The key is to have a state on your slider value:

const [value, setValue] = React.useState(50);

And then pick a class base on that value:

className={`slider ${value > 50 ? "slider-50" : "slider-0"}`}

function App() {
  const [value, setValue] = React.useState(50);
  return (
    <React.Fragment>
      <h1>Round Range Slider</h1>
      <div class="slidecontainer">
        <input
          type="range"
          min="1"
          max="100"
          value={value}
          onChange={({ target: { value } }) => setValue(value)}
          className={`slider ${value > 50 ? "slider-50" : "slider-0"}`}
        />
        <p>
          Value: <span>{value}</span>
        </p>
      </div>
    </React.Fragment>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(
    <App />,
  rootElement
);
.slidecontainer {
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 15px;
  border-radius: 5px;
  background: #d3d3d3;
  outline: none;
  opacity: 0.7;
  -webkit-transition: 0.2s;
  transition: opacity 0.2s;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  cursor: pointer;
}
.slider-50 {
  background: blue;
  background: linear-gradient(90deg, #d3d3d3 50%, blue 50%);
}
.slider-50::-webkit-slider-thumb {
  background: blue;
}

.slider-0 {
  background: purple;
  background: linear-gradient(90deg, purple 50%, #d3d3d3 50%);
}
.slider-0::-webkit-slider-thumb {
  background: purple;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #04aa6d;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>