noUiSlider as a React component

Question

I am trying to convert the noUiSlider plugin to a React JS component. I have ran into an issue. I can't seem to bind the slider values to the inputs that are being created. The slider shows and slides as intended. The inputs show in the HTML with the correct IDs as well, just no values being displayed. Here is my JSX:

class Slider extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        start: this.props.start,
        connect: this.props.connect,
        step: this.props.step,
        orientation: this.props.orientation, // 'horizontal' or 'vertical'
        range: this.props.range,
        format: this.props.format
    }
    this.handleSliderChange = this.handleSliderChange.bind(this);
}
componentDidMount() {
    let slider = this.props.id;
    noUiSlider.create(slider, {
        start: this.state.start,
        connect: this.state.connect,
        step: this.state.step,
        orientation: this.state.orientation,
        range: this.state.range,
        format: this.state.format
    });
    slider.noUiSlider.on('update', this.handleSliderChange);
}


onChangePage = (event, item) => {
    this.props.onChange(event);
}
render() {
    let inputs = [];
    for (let i = 0; i < 2; i++) {
        inputs.push(<div key={i}><input id={this.props.inputs[i].id} 
    onChange={this.onChangePage} value={this.state.start[i]} type="text" />
    </div>);}
    let input2 = this.props.inputs.map((input, inputKey) => {
        return this.props.start.map((prop, propKey) => {
            return <div><input key={inputKey} id={input.id} onChange=
        {this.onChangePage} type="text" /></div>;
        });
    });
    return (
        <div>
            <div className="slider-value-container clearfix">
                {inputs}
            </div>
            <div id={this.props.id} className="slider"></div>
        </div>
    )
 }

}

And here is where I am using the component on my page:

<Slider
  id="sqftSlider"
  value={[this.state.lowerValue, this.state.higherValue]}
  inputs={sqftSlider}
  onChange={this.handleFilterChange}
  range={{ min:0, max: 5000 }}
  start={[0, 5000]}
  format={wNumb({
    decimals: 0,
    thousand: ','
  })}
  orientation="horizontal"
  connect={true}
  step={100}
 />

This is the array that passes in the id for the inputs.

const sqftSlider = [{
   id: 'lowerSqftSlider'
},
{
   id: 'upperSqftSlider'
}];

Any help appreciated!

Answer 1

The updated code above fixed my issue. Creating the handleSliderChange() and putting all of the slider handle values in there along with the for loop creating the inputs fixed it.