Question

我有一个通过fetch（）请求调用的JSON文件。我有两个类型为“范围”的输入。我想将两者合并。

我想制作一个双滑块，但是，如果我将两个元素放在另一个之上，则只有最上面的一个接受鼠标单击。我不希望使用任何外部库来对滑块进行反应。我做到了，但是主要的问题是它在Mozilla浏览器和IE中不起作用。它仅适用于chrome浏览器，我认为是由于pointer-events: none;尚未在Mozilla浏览器中运行。有想法吗？

<!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>

指针事件：无；在Mozilla浏览器中

0 个答案: