input type=range (aka 'slider') not rendering/working properly (on Windows-10)

Issue #20882987 • Assigned to Rossen A.


David C.
Mar 18, 2019
This issue is public.
Found in
  • Microsoft Edge
Reported by 2 people

Sign in to watch or report this issue.

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:
(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:

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)


0 attachments

    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.

    You need to sign in to your Microsoft account to add a comment.

    Sign in