Issue
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?
Solution
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>
Answered By - Ryan Le
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.