Labels are not placed correctly on fisrt load

[Sthefanny Gonzaga]

Hi,
The labels are not correctly placed on load, but if I click somewhere in the component it fixes. I don't know if I'm missing something..

So, the code is:
<ReactBootstrapSlider ticks={[0, 1, 2, 3, 4, 5]} value={[4, 5]} handle="square" ticks_labels={["Set/2018", "Out/2018", "Nov/2018", "Dez/2018", "Jan/2019", "Fev/2019"]} range={true} />

This is when it first loads:

And the when I click somewhere in the component:

[Michael Brown]

Yes, I noticed this too when I was playing around with my demo code. It worked fine when I had the CSS added to the HTML as link tag, but when I was importing the CSS directly into my JavaScript with Webpack, I saw this issue with the ticks control labels.

It's actually un upstream issue with the bootstrap-slider control, as you can see on this SO post. Following the advice on one of the comments there, I added the ticks_positions prop on my demo code to fix it, like so:

    <div className="demoWrapper">
      <h3>Ticks Demo</h3>
      <Demo
        id="ticksSlider"
        startValue={200}
        ticks={[0, 100, 200, 300, 400]}
        ticks_positions={[0, 25, 50, 75, 100]}
        ticks_labels={["$0", "$100", "$200", "$300", "$400"]}
        ticks_snap_bounds={30}
      />
    </div>

I had to experiment a bit to get the right values for the ticks_positions prop. As you can see, they are not the same of the actual ticks values.