Error while dragging: Cannot read property 'toFixed' of undefined

[Tsury]

Happens with the latest version of rc-slider, also in the last version of ant-design.
Happens when dragging horizontal slider and keep dragging while getting out of the slider X and Y range.

In this line (createSlider.js):
var nextValue = this.trimAlignValue(this.calcValue(pixelOffset));

pixelOffset is negative, and this.calcValue(pixelOffet) returns NaN.

Uncaught TypeError: Cannot read property 'toFixed' of undefined
    at Object.ensureValuePrecision (utils.js:97)
    at ComponentEnhancer.trimAlignValue (Slider.js:170)
    at ComponentEnhancer.calcValueByPos (createSlider.js:260)
    at ComponentEnhancer.onMove (Slider.js:132)
    at ComponentEnhancer._this.onMouseMove (createSlider.js:153)

[Tsury]

Still having this :(

[yesmeck]

Could you reproduce this issue on https://codesandbox.io/?

[Tsury]

I solved it by specifically giving both a width and a height to the slider. Still a bug as far as I'm considered, but can be worked around.

[carolinaroman]

Hi, I hope this is the right place to post. I encountered this same problem, when creating a vertical slider with min/max input fields. You can see the error in https://codesandbox.io/s/698kloo2w as soon as you try to drag the visible handler.

The code is a copy of the example http://react-component.github.io/slider/examples/range.html. The only difference is the added 'vertical' attribute to Range.

(For whatever reason, I can only see the right error in Chrome on osx. Firefox shows a different unrelated error.)

I'm using rc-slider 8.6.1, npm 5.6.0

[Floriferous]

@yesmeck can this be reopened ?

[AgoloAhmedElhady]

any updates about this ? I am facing the same issue

[AugustoAleGon]

@Tsury How did you solve it?

[AgoloAhmedElhady]

I tried all possible solutions and I even used it with antd and it still did not work

[Tsury]

@AugustoAleGon @AgoloAhmedElhady Yes I have, but just as a workaround. I gave specific height to the control and it was resolved. I'm away from my computer, I'll be able to fetch the exact code once I'm home.

[osenvosem]

I am having the same issue. Error on string 76 of utils.js file:

export function ensureValuePrecision(val, props) {
  var step = props.step;

  var closestPoint = getClosestPoint(val, props);
  here>>> return step === null ? closestPoint : parseFloat(closestPoint.toFixed(getPrecision(step)));
}

@yesmeck any chance you will pay attention to this?

[volotovskyy]

@osenvosem I've just stuck with the same problem with default horizontal mode
However, in my case rc-slider works until I try to wrap it by getFieldDecorator of rc-form.
I've fixed this by adding width as style={{ width: 200 }} to my component.