Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The calcite-slider slider component breaks when the tick number is too large #7242

Closed
2 of 3 tasks
fendiaoxiaoshuazi opened this issue Jun 29, 2023 · 3 comments
Closed
2 of 3 tasks

The calcite-slider slider component breaks when the tick number is too large #7242

fendiaoxiaoshuazi opened this issue Jun 29, 2023 · 3 comments
Assignees
@geospatialem
Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Survey123 Issues logged by ArcGIS Survey123 team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Milestone
2023 July Priorities

Comments

@fendiaoxiaoshuazi
Copy link

fendiaoxiaoshuazi commented Jun 29, 2023 •
edited
Loading

Check existing issues

Description

The calcite-slider slider component breaks when the tick number is too large.
image
image

Acceptance Criteria

Automatically group/cluster the ticks to reduce the tick number. Then, the slider won't break the web page.

Relevant Info

No response

Which Component

calcite-slider

Example Use Case

We use the the slider component in the Survey123 to support a new slider question type. Sometime user might accidentally set the slider question with too many ticks, which drops the page performance or breaks the page.

Priority impact

p4 - not time sensitive

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react

Esri team

ArcGIS Survey123
@fendiaoxiaoshuazi fendiaoxiaoshuazi added 0 - new New issues that need assignment. enhancement Issues tied to a new feature or request. needs triage Planning workflow - pending design/dev review. labels Jun 29, 2023
@github-actions github-actions bot added impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive ArcGIS Survey123 Issues logged by ArcGIS Survey123 team members. labels Jun 29, 2023
@macandcheese macandcheese added bug Bug reports for broken functionality. Issues should include a reproduction of the bug. and removed enhancement Issues tied to a new feature or request. labels Jun 29, 2023
@macandcheese
Copy link
Contributor

macandcheese commented Jun 29, 2023 •
edited
Loading

I'd consider this a bug and a pretty serious one as it can potentially crash the page.

It's reproducible in Codepen as well:

Screen Shot 2023-06-28 at 8 08 04 PM

https://codepen.io/mac_and_cheese/pen/qBQrJXY?editors=1000 (warning, browser may 💀)

It seems to become worse the more ticks need to be rendered - whether that's a very high 'max' value and a step of '1', or a more reasonable max and a fractional step value that causes thousands to render like '.1'.

Defer on priority between Medium / High - cc @geospatialem / @jcfranco

@macandcheese macandcheese added impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone and removed impact - p3 - not time sensitive User set priority impact status of p3 - not time sensitive labels Jun 29, 2023
@geospatialem geospatialem added the p - high Issue should be addressed in the current milestone, impacts component or core functionality label Jun 29, 2023
@geospatialem geospatialem added this to the 2023 July Priorities milestone Jun 29, 2023
@geospatialem geospatialem removed the needs triage Planning workflow - pending design/dev review. label Jun 29, 2023
@jcfranco jcfranco added 2 - in development Issues that are actively being worked on. and removed 0 - new New issues that need assignment. labels Jun 30, 2023
@jcfranco jcfranco self-assigned this Jun 30, 2023
@jcfranco jcfranco added the estimate - 3 A day or two of work, likely requires updates to tests. label Jul 28, 2023
@jcfranco jcfranco mentioned this issue Aug 2, 2023
Merged
jcfranco added a commit that referenced this issue Aug 3, 2023
@jcfranco
fix(slider): prevent excessive tick rendering (#7421)
c799409 
**Related Issue:** #7242

## Summary

This caps the amount of ticks that get rendered at a time (max 250).

**Note**: The current max was determined heuristically to strike a
balance between amount of ticks displayed and avoiding cluttering.
@jcfranco jcfranco added 3 - installed Issues that have been merged to master branch and are ready for final confirmation. and removed 2 - in development Issues that are actively being worked on. labels Aug 3, 2023
@github-actions github-actions bot assigned geospatialem and unassigned jcfranco Aug 3, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Aug 3, 2023

Installed and assigned for verification.

benelan pushed a commit that referenced this issue Aug 3, 2023
@jcfranco @benelan
fix(slider): prevent excessive tick rendering (#7421)
3f1fba7 
**Related Issue:** #7242

## Summary

This caps the amount of ticks that get rendered at a time (max 250).

**Note**: The current max was determined heuristically to strike a
balance between amount of ticks displayed and avoiding cluttering.
@geospatialem geospatialem added 4 - verified Issues that have been released and confirmed resolved. and removed 3 - installed Issues that have been merged to master branch and are ready for final confirmation. labels Aug 3, 2023
@geospatialem
Copy link
Member

Verified in 1.5.0-next.36 with the following sample:

<calcite-slider min="-1000" max="1000" ticks="10"></calcite-slider>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@geospatialem geospatialem

Labels
4 - verified Issues that have been released and confirmed resolved. ArcGIS Survey123 Issues logged by ArcGIS Survey123 team members. bug Bug reports for broken functionality. Issues should include a reproduction of the bug. estimate - 3 A day or two of work, likely requires updates to tests. impact - p2 - want for an upcoming milestone User set priority impact status of p2 - want for an upcoming milestone p - high Issue should be addressed in the current milestone, impacts component or core functionality
Projects
None yet
Milestone
2023 July Priorities
Development

No branches or pull requests
4 participants
@jcfranco @macandcheese @geospatialem @fendiaoxiaoshuazi