Binding moved.zf.slider (Zurb Foundation) to React function

Question

Edit: put in entire code as requested. There are a few changes from the original.

I'm trying to use the foundation slider with react and ES6. When the slider moves, it's supposed to emit a moved.zf.slider event. React is supposed to be able to bind to custom events. My code:

//React and third party references
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class SearchRangeFilter extends Component {
    constructor(props) {
        super(props);
        this.handleSliderMove = this.handleSliderMove.bind(this);
    }
    componentDidMount(){
        this.nv.addEventListener("moved.zf.slider", this.handleSliderMove);
    }
    componentWillUnmount(){
        this.nv.removeEventListener('moved.zf.slider', this.handleSliderMove);
    }
    handleSliderMove(){
        console.log("Nv Enter:");
    }
    render() {
        return (
            <div id="distance-selector-wrapper" className="flex-wrapper">
                <div className="range-slider__wrapper">
                <div ref={elem => this.nv = elem} className="slider" data-slider data-initial-start="50">
                    <span className="slider-handle"  data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput1"></span>
                    <span className="slider-fill" data-slider-fill></span>
                </div>
                </div>
                <div className="range-slider__value">
                    <input type="number" id="sliderOutput1" />
                </div>
            </div>
        );
    }
}
export default SearchRangeFilter;

By running $("#sliderOutput1").val() in my browser's console I can see that when I move the slider, the hidden input's value is changing. However handleSliderMove() is never getting called.

What am I doing wrong?

Can you please provide code for the entire component? – T Porter Dec 11 '17 at 18:11 — T Porter, Dec 11 '17 at 18:11

T Porter · Answer 1 · 2017-12-11T17:46:51.683

0

I believe you are misusing the refs property. As defined in the React docs, the refs property should be a callback. So in your case, your component definition would look like

//...
<div 
  className="slider" 
  ref={elem => this.nv = elem}
  data-slider 
  data-initial-start="500" 
  data-start="0" 
  data-end="5000" 
  data-binding="true" 
  data-draggable="true" 
  data-decimal="0" 
  data-step="10">
//...

and your lifecycle hooks would look something like this

componentDidMount(){
    this.nv.addEventListener("moved.zf.slider", this.handleSliderMove);
}
componentWillUnmount(){
    this.nv.removeEventListener('moved.zf.slider', this.handleSliderMove);
}

edited Dec 11 '17 at 17:46

answered Dec 11 '17 at 16:34

T Porter

1,162
7
15

I assumed you meant `ref={(elem) => {this.nv = elem}}` by the way. Doesn't compile the other way – levininja Dec 11 '17 at 17:45
Fixed my answer. It should be curly braces rather than parentheses. – T Porter Dec 11 '17 at 17:48

Binding moved.zf.slider (Zurb Foundation) to React function

1 Answers1