我有一个通过fetch（）请求调用的JSON文件，我通过type = range有两个输入。是否可以使带有两个输入值的HTML5滑块发生反应？我想制作一个double滑块，但是如果我在彼此之上绘制两个元素，则只有最上面的一个元素接受鼠标单击。 我不想在React中使用任何外部库来制作滑块。
class App extends React.Component {
constructor(props){
super(props);
this.state = {
data: [],
library:null,
.
.
.
};
}
componentDidMount() {
fetch('/json.bc', {
method: 'get',
},)
.then(response => response.text())
.then(text => {
.
.
.
.
}).catch(error => console.error(error))
}
.
.
.
.
// handle render of library
renderLibrary = () => {
const { library } = this.state;
return library.sort((a,b)=>a.total - b.total).map((item, i) => (
<div className="item">
{item._id}
.
.
.
</div>
))
}
render() {
const { library} = this.state;
return (
<div>
<input type="range" min="12" max="24" defaultValue="24" step="1" className="exitTimeSecond" />
<input type="range" min="0" max="11" defaultValue="0" step="1" className="exitTimeFirst" />
{this.renderLibrary()}
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('Result'))
Edite：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
.price-slider{ position: relative; width: 400px; margin: 0 auto 20px; height: 35px; text-align: center;}
.price-slider input{pointer-events: none; position: absolute; left: 0; top: 15px; width: 100%; outline: none; height: 18px; margin: 0; padding: 0; border-radius: 8px;}
.price-slider input::-webkit-slider-thumb{pointer-events: all; position: relative; z-index: 1; outline: 0; height: 24px; widows: 24px; border-radius: 12px; background-color: white; border: 2px solid black; -webkit-appearance: none;}
</style>
<body>
<div id="container"></div>
<script src="/js/react.production.min.js" crossorigin></script>
<script src="/js/react-dom.production.min.js" crossorigin></script>
<script src="/js/babel.min.js" crossorigin></script>
<script src="/js/react.paging.js"></script>
<script type="text/babel">
class Hello extends React.Component {
constructor(){
super();
this.state = {
val1:0,
val2:100
}
}
componentDidMount() {
this.sliders=
document.querySelectorAll(".price-slider input");
}
updatePriceLabels = (e, slider) => {
console.log('ok')
let val1,val2;
if(slider==='one'){
val1=e.target.value;
val2=this.state.val2;
}else if(slider==='two'){
val1=this.state.val1;
val2=e.target.value;
}
if(val1 >= val2){
this.setState({
val1 :val2-3,
val2:val2
});
return;
}else if(val2<=val1){
this.setState({
val1:val1+3,
val2:val1
});
return;
}else{
this.setState({
val1:val1,
val2:val2
});
}
console.log(this.sliders)
if(val1 >0 || val2 < 99){
this.sliders[0].style.background=
this.sliders[1].style.background="-webkit-gradient(linear, 0 0,100% 0, color-stop(0, white), color-stop(" + (val1 / 100) + ", white),color-stop(" + (val1 / 100) + ", #f0f0f0), color-stop(" + (val2 / 100) + ", #f0f0f0), color-stop(" + (val2 / 100) + ", white))";
}else{
this.sliders[0].style.background=
this.sliders[1].style.background='';
}
}
render(){
return(
<div className="price-slider">
<input value={this.state.val1} min="0" defaultValue="0" max="100" step="0.5" type="range" onChange={(e)=>this.updatePriceLabels(e,'one')} />
<input value={this.state.val2} min="0" defaultValue="100" max="100" step="0.5" type="range" onChange={(e)=>this.updatePriceLabels(e,'two')} />
</div>
)
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
</script>
</body>
</html>
答案 0 :(得分：0)
我在网上发现有人这样做了，看来您要尝试的做法很骇客：http://giacomoballi.com/css-range-double-slider/#.XLQhgOszbMU 这是另一个示例：https://stackoverflow.com/a/42391098/1871891。
您可以自己构建一个不太hacky的版本，并从诸如https://github.com/joris-calvat/react-dual-range-slider/blob/master/src/components/react-dual-range-slider.jsx之类的过去创建该版本的人那里汲取灵感。或其他一系列。
无论如何，我是根据Giacomo Balli为您创建的小提琴-通过{BigBalli在http://giacomoballi.com/css-range-double-slider/#.XLQtueszbMV找到了
https://jsfiddle.net/rockyhuber/b8g7scm0/
您可以完善逻辑。真的很快就把它们放在一起了。希望这会有所帮助。
class Hello extends React.Component {
constructor() {
super();
this.state = {
val1: 0,
val2: 100
}
}
componentDidMount() {
this.sliders = document.querySelectorAll(".price-slider input");
}
updatePriceLabels = (e, slider) => {
let val1, val2;
if (slider === 'one') {
val1 = parseInt(e.target.value);
val2 = parseInt(this.state.val2);
if (val1 >= val2 && val2 < 97) {
this.setState({
val1: val1,
val2: val2 + 3
});
} else if (val1 >= 97) {
this.setState({
val1: 97,
val2: 100
});
} else if (val1 <= val2) {
this.setState({
val1: val1,
val2: val2
});
} else {
this.setState({
val1: val1,
val2: val2
});
}
} else if (slider === 'two') {
val1 = parseInt(this.state.val1);
val2 = parseInt(e.target.value);
if (val2 <= val1 && val1 < 3) {
this.setState({
val1: 0,
val2: val1 + 3
});
} else if (val2 <= 3) {
this.setState({
val1: 0,
val2: 3
});
} else if (val2 <= val1) {
this.setState({
val1: val2 - 3,
val2: val2
});
} else {
this.setState({
val1: val1,
val2: val2
});
}
}
console.log(this.sliders)
if (val1 > 0 || val2 < 99) {
this.sliders[0].style.background = this.sliders[1].style.background = "-webkit-gradient(linear, 0 0,100% 0, color-stop(0, white), color-stop(" + (val1 / 100) + ", white),color-stop(" + (val1 / 100) + ", #f0f0f0), color-stop(" + (val2 / 100) + ", #f0f0f0), color-stop(" + (val2 / 100) + ", white))";
} else {
this.sliders[0].style.background = this.sliders[1].style.background = ''; }
}
render() {
return (
<div className="price-slider">
<input value={this.state.val1} min="0" max="100" step="0.5" type="range" onChange={(e) => this.updatePriceLabels(e, 'one')}></input>
<input value={this.state.val2} min="0" max="100" step="0.5" type="range" onChange={(e) => this.updatePriceLabels(e, 'two')}></input>
</div>
)
}
}
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);