Handle doesn't start at the correct position in React 16

[jshthornton]

When using react 16 the handle does not start at the position you give it.

For example:

<ReactSlider
  min={0}
  max={10}
  value={5}
>
  <div/>
</ReactSlider>

The handle will be at 0 and not draggable until you click on the bar.

[Nesciosquid]

Can confirm!

[Artforge]

+1

[hennadiy-kudashev]

+1

[caseybaggz]

Same.

[martinschnurer]

Ugly workaround for controlled slider:

const defaultValues = [20, 30, 40]

class Home extends React.Component {
  constructor () {
    super()
    this.state = { value: defaultValues }
  }
  componentDidMount () {
    setTimeout(() => this.setState({
      value: defaultValues
     }), 1)
  }
  render () {
    <ReactSlider value={this.state.value} onChange={value => this.setState({value})}>
      <div className="my-handle">1</div>
      <div className="my-handle">2</div>
      <div className="my-handle">3</div>
    </ReactSlider>   
  }
}

[caseybaggz]

@mpowaga do you have plans on updating to v16 in the near future?

[erosenberg]

This is happening for me too!

[laurenkt]

As an alternative to @martinschnurer's workaround if you are using props instead of state, or if you just want to avoid referencing your initial state twice, you can just do this on your component:

componentDidMount () {
    setTimeout(() => this.forceUpdate(), 1)
}

[lukashlavacka]

See https://github.com/mpowaga/react-slider/pull/114 for a fix

[mpowaga]

Fixed in version 0.10.0.