[Slider] Blocked dragging with min and max with same value or at the end of the component

[geospatialem]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

When the slider has a min and max that collapses in the same nodes the nodes aren't able to allow for dragging in either direction. In some cases users have to drag the slider to the right (since the end node is always on top), and dragging to the left is blocked.

This is especially noticeable when the component's nodes are both set to the end of the component. The slider appears to be stuck, and users can't drag to the left.

CalciteSlider.mp4

Expected Behavior

• The slider detects the direction of drag and accommodates the node ordering so the user doesn't feel stuck.
• The user can slide either handle past the other without it being blocked
• If the component's nodes are stacked they can still slide in either direction
• If both of the component's nodes are at the end of the component the user can still slide a node in the opposite direction

To explore a custom solution (outside of Calcite):

1. Visit Topo Map Explorer
2. In the left panel select the years to engage the custom-built slider
3. Slide away! ✨

Sliders.mp4

Reproduction Sample

https://codepen.io/geospatialem/pen/gONVzYW

Reproduction Steps

1. Open the sample
2. Adjust the min value handle to meet with the max
3. Observe the min will not adjust accordingly. User is unable to move the handle past the max
4. Steps 2 and 3 can be repeated for the max value WRT to the min
5. The more troubling experience observed Move both handles to the end of the component and observe the handles cannot be moved at all via mouse

Reproduction Version

2.12.2

Relevant Info

No response

Regression?

No response

Priority impact

impact - p3 - not time sensitive

Impact

Low, team has a workaround with a custom solution.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Living Atlas