Nouislider reactjs set value

Question

https://www.npmjs.com/package/nouislider-react can't insert value into slider

 class KeyboardSlider extends React.Component {
  state = { ref: null };

  changeByRef = () => {
    const { ref } = this.state;
    if (ref && ref.noUiSlider) {
      ref.noUiSlider.set(20);
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.changeByRef}>Change with ref</button>
        <Nouislider
          instanceRef={instance => {
            if (instance && !ref) {
              this.setState({ ref: instance });
            }
          }}
          start={0}
          range={{
            min: 0,
            max: 100
          }}
        />
      </div>
    );
  }
}

this code does not work gives an error Line 665: 'ref' is not defined no-undef ....................................................................................................

Amir Rezvani Amir Rezvani · Accepted Answer · 2019-12-13T00:08:28

try this code i just refactor you are using the ref in wrong way.

you can also use input and change the value by updating the start prop on Slider.

 class KeyboardSlider extends React.Component {
  constructor(props){
    super(props);
    this.ref = React.CreateRef();
  }

  changeByRef = () => {
    
    if (this.ref && this.ref.noUiSlider) {
      this.ref.noUiSlider.set(20);
    }
  };

  render() {
    return (
      <div>
        <button onClick={this.changeByRef}>Change with ref</button>
        <Nouislider
          instanceRef={instance => {
            if (instance && !ref) {
              this.setState({ ref: instance });
            }
          }}
          start={0}
          range={{
            min: 0,
            max: 100
          }}
        />
      </div>
    );
  }

Nouislider reactjs set value

1 Answers