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>上面的代码是一个用 HTML 制作的范围滑块。
在反应中，如果值小于 50，我如何创建一个，那么滑块的左侧是蓝色的。如果该值大于 50，那么滑块的右侧将是紫色？
关键是在你的滑块值上有一个状态：
const [value, setValue] = React.useState(50);
然后根据该值选择一个类：
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句