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

Question

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 1

if you want to change the color with the movement of the slider, here's a trick.

function App() {
  const [val, setVal] = React.useState(100);
  return (
    <React.Fragment>
      <h1>Round Range Slider</h1>
      <div class="slidecontainer">
        <input
          type="range"
          min="100"//min can be 0
          max="255" //max can be 255
          value={val}
          onChange={(e) => setVal(e.target.value)}
          style={{backgroundColor: `rgb(val-50, val, val-20)`}} //you can do same trick as you like
        />
      </div>
    </React.Fragment>
  );
}

Answer 2

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>