React JQuery slider

component lifecycles integrated jQuery

by Rich Costello

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/south-street/jquery-ui.min.css">
<div class="container-fluid">
      <h1>Slider Integration</h1>
      <div id="slider"></div>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

$(function() {
        let handleChange = (e, ui)=>{
          var slideEvent = new CustomEvent('slide', {
            detail: {ui: ui, jQueryEvent: e}
          })
          window.dispatchEvent(slideEvent)
        }
        $('#slider').slider({
          'change': handleChange,
          'slide': handleChange
        })
      })

class SliderButtons extends React.Component {
  constructor(props) {
  		super(props)
      this.state = {sliderValue: 0}
      this.handleSlide = this.handleSlide.bind(this)
      this.hanleChange = this.handleChange.bind(this)
  }
  handleSlide(event, ui) {
  	this.setState({sliderValue: ui.value})
  }
  handleChange(value){
  	return ()=> {
    	$('#slider').slider('value', this.state.sliderValue + value)
      this.setState({sliderValue: this.state.sliderValue + value})
    }
  }
  componentDidMount() {
  	$('#slider').on('slide', this.handleSlide)
  }
  componentWillUnmount(){
  	$('#slider').off('slide', this.handleSlide)
  }
  render() {
  	return<div>
  	  <button disabled={(this.state.sliderValue<1) ? true : false}
        className="btn default-btn"
        onClick={this.handleChange(-1)}>
  	    1 Less ({this.state.sliderValue - 1})
  	  </button>
      <button disabled={(this.state.sliderValue>99) ? true : false}
        className="btn default-btn"
        onClick={this.handleChange(1)}>
  	    1 More ({this.state.sliderValue + 1})
  	  </button>
        <SliderValue />
  	</div>
  
  }
}

class SliderValue extends React.Component {
  constructor(props) {
    super(props)
    this.handleSlide = this.handleSlide.bind(this)
    this.state = {sliderValue: 0}
  }
  handleSlide(event) {
    this.setState({sliderValue: event.detail.ui.value})
  }
  componentDidMount() {
    window.addEventListener('slide', this.handleSlide)
  }
  componentWillUnmount() {
    window.removeEventListener('slide', this.handleSlide)
  }
  render() {
    return <div className="" >
      Value: {this.state.sliderValue}
    </div>
 ...