How to merge two inputs by type=range in ReactJs to make a slider?

I have a JSON file called by fetch() request.I have two input by type=range .Is it possible to make a HTML5 slider with two input values in react?I'd like to make the double slider , but if I draw two elements on top of one another, only the top one is accepting mouse clicks.Actually I do not want to use any external library in React to make the slider.

 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'))

1 answer

  • answered 2019-04-15 07:08 user1871891

    I have found online someone who did it, seems like what you're trying to do is quite hacky: http://giacomoballi.com/css-range-double-slider/#.XLQhgOszbMU Here is another example of this: https://stackoverflow.com/a/42391098/1871891.

    You can build a less hacky version by yourself and draw inspiration on how it was built from people who have built it in the past, like https://github.com/joris-calvat/react-dual-range-slider/blob/master/src/components/react-dual-range-slider.jsx. Or a range of other ones out there.

    Anyway, I created a fiddle for you based on Giacomo Balli -Found at http://giacomoballi.com/css-range-double-slider/#.XLQtueszbMV via @BigBalli:

    https://jsfiddle.net/rockyhuber/b8g7scm0/

    You can perfect the logic. It was really quickly thrown together. Hope this helps.

    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 = 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" 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')
    );