Mon. Mar 27th, 2023

[ANSWERED] html – In react, how to change the color of a range slider based on the value?

By

Nov 18, 2022 css, html, reactjs

Solution 1 :

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>

Solution 2 :

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>
  );
}

Problem :

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?

Comments

Comment posted by TYeung

“if the value is greater than 50, the right side of the slider would be the color of purple”. Will the left 50% stay blue or no color anymore?

By

Related Post

[ANSWERED] HTML & Javascript – make text appear when dropdown menu option selected

Nov 20, 2022

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022