Range Slider with multi category repositions if dragging on the gray area
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 18.3k
- Forks
- 2k
- Avg merge
- 2d 12h
- Merged PRs (30d)
- 28
Description
I've searched in https://github.com/plotly/angular-plotly.js if there was any issues about the range slider jumping randomly but there was not much but plotlys main repo had a few that were somewhat related but not exactly.
I've been wanting to use angular-plotly for my application since it had range slider and multi category axis with an easy api but i've noticed that when the user were to slide on the gray area to the far left or far right, the range slider would reposition to the top suddenly and would cause the x-axis to disappear.
Sometimes simply dragging in the gray area would cause the repositioning and a jumpy range change.
I thought maybe this was just the angular-plotly since the range slider example i copied from was https://plotly.com/javascript/range-slider/ , where there was no range slider reposition when sliding,
but it appears that this jumping also happens in the vanilla js.
Reproducible Ex:
https://stackblitz.com/edit/js-7ietfq?file=index.js%2Cpackage.json
start sliding in the gray area (left or right):
ends up after sliding:
my quick and toplevel guess is that the quickest temporary fix would be if somehow the library just disabled/prevent any interaction on the gray area and restrict only to using the handle bars until there is a fix?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked StackBlitz reproduction, especially index.js and package.json, and reproduce the range-slider drag on the gray area with a multi-category axis. Trace the range-slider interaction from that example and verify that dragging at either edge no longer moves the slider upward, hides the x-axis, or causes a jumpy range change.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- data-visualization
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100