Skip to content

Commit

Permalink
fix(slider): range slider thumb on all touch-enabled devices now foll…
Browse files Browse the repository at this point in the history
…ows touch gesture (#6553)

**Related Issue:** #4290

## Summary

Replicated the issue on a PC tablet (Dell Precision 5560 per use case)
and noticed that the slider was being blocked by the browser swipe
gesture. Happened on several browsers tested on this device (Chrome
110.0.5481, MicrosoftEdge 11.0.1587).


https://user-images.githubusercontent.com/19231036/222330979-31a80b8e-4ab8-41d1-aaa5-812248e6e838.mp4


Solved by disabling browser swipe navigation to next/previous page to
prevent interference with the slide thumb intended functionality to
follow touch gesture. The fix will apply to all touch-enabled devices,
including iOS and and tablets running other operating systems.

Can't see a way to automatically test it in our setup, maybe we could
add a wiki or confluence page for the slider behavior on other devices
(any slider part should use touch-action: none because ...).
  • Loading branch information
Elijbet authored Mar 2, 2023
1 parent 4a511ba commit 70cade7
Showing 1 changed file with 2 additions and 0 deletions.
2 changes: 2 additions & 0 deletions src/components/slider/slider.scss
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,8 @@
--calcite-slider-full-handle-height: calc(
var(--calcite-slider-handle-size) + var(--calcite-slider-handle-extension-height)
);
touch-action: none;
// disable browser swipe navigation to prevent interference with the slide thumb following a touch gesture
}

@include disabled() {
Expand Down

0 comments on commit 70cade7

Please sign in to comment.