diff --git a/draftlogs/6780_fix.md b/draftlogs/6780_fix.md new file mode 100644 index 00000000000..51b8d3b8f7c --- /dev/null +++ b/draftlogs/6780_fix.md @@ -0,0 +1 @@ +- Fix `Cannot read properties of undefined (reading '0')` when the mouse moves to x=0 while dragging a rangeslider [[#6780](https://github.com/plotly/plotly.js/pull/6780)], with thanks to @david-bezero for the contribution! diff --git a/src/components/rangeslider/draw.js b/src/components/rangeslider/draw.js index 1bae4a3bbe3..3f9049070e8 100644 --- a/src/components/rangeslider/draw.js +++ b/src/components/rangeslider/draw.js @@ -224,6 +224,16 @@ module.exports = function(gd) { }); }; +function eventX(event) { + if(typeof event.clientX === 'number') { + return event.clientX; + } + if(event.touches && event.touches.length > 0) { + return event.touches[0].clientX; + } + return 0; +} + function setupDragElement(rangeSlider, gd, axisOpts, opts) { if(gd._context.staticPlot) return; @@ -234,7 +244,7 @@ function setupDragElement(rangeSlider, gd, axisOpts, opts) { function mouseDownHandler() { var event = d3.event; var target = event.target; - var startX = event.clientX || event.touches[0].clientX; + var startX = eventX(event); var offsetX = startX - rangeSlider.node().getBoundingClientRect().left; var minVal = opts.d2p(axisOpts._rl[0]); var maxVal = opts.d2p(axisOpts._rl[1]); @@ -247,7 +257,7 @@ function setupDragElement(rangeSlider, gd, axisOpts, opts) { dragCover.addEventListener('mouseup', mouseUp); function mouseMove(e) { - var clientX = e.clientX || e.touches[0].clientX; + var clientX = eventX(e); var delta = +clientX - startX; var pixelMin, pixelMax, cursor;