Steps to reproduce
There are two problems:
#1: CSS won’t render the ‘thumb’ (aka ‘handle’) to be taller than the slider/track.
This is illustrated perfectly on the page here: http://danielstern.ca/range.css/#/
(This renders fine on Android’s Edge browser…Windows-10 Edge browser is the issue)
#2: It should be possible to declare 'pointer-events: none" for the slider/track, yet
declare ‘pointer-events auto’ for the thumb, so that the only mouse-event sensitive
item is the thumb/handle. (the use-case is so that hover or move or click events won’t trigger when mouse is moved across the slider-track, but trigger only when the thumb/handle is passed-over/contacted). This works fine on all other major browsers, such as Chrome, Opera, Firefox, etc
Note: Both of these item do require use of ‘non-standards’ features described here: https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-thumb
That said, I maintain that NOT implementing the first issue results in totally UGLY thumbs,
and in the second case, the distinction becomes important, when a slider-track is the width of the document e.g. to maximize preciseness of positioning, such as scrolling thru video thumbnails (which should appear ONLY when user is USING the thumb/handle)
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Zachariah L.”
Changed Assigned To to “Rossen A.”
I found the same issue as well, and couldn’t figure a workaround. Would really appreciate it if someone could take a look at this.
I’m happy to report that his problem is RESOLVED, when using the new Chromium-based Edge browser, in the DEV channel.