Material-design-lite: Slider Thumb not showing in Microsoft Edge on Windows 10

[sathomas]

Screen shot taken from modern.ie VM Build number:20150801 running on Parallels Desktop 11.0.1

[sgomes]

Thanks, @sathomas, I'll take a look at this.

[danielktaylor]

As a workaround I removed the MDL styling from the sliders on Edge:

$(function() {
    var user_agent = navigator.userAgent;
    var edge = /(edge)\/((\d+)?[\w\.]+)/i;
    if (edge.test(user_agent)) {
        $("input.mdl-slider.mdl-js-slider").removeClass("mdl-slider mdl-js-slider");
    }
});

Still looks okay, and is a lot more usable until this bug is fixed.

[sgomes]

It looks like Edge handles the native styling of sliders differently from IE.

We'll be reimplementing sliders without using native styling in v2, but for now we should add a browser hack to solve this issue in Edge.

[DanTup]

What's the status of this? I just noticed this looks bad in Edge on my site so I checked the getmdl page and it's exactly the same. This is almost unusable on Edge, the hit target is tiny.

[mbaileys]

The Edge solution is to specify the height of the input["range"] element. Since it doesn't depend on the thumb height, the thumb gets clipped.

.mdl-slider {
min-height: 20px;
}

[skosch]

Thanks @mbaileys, that helped. I found that I also needed

.mdl-slider::-ms-thumb {
  /* ... extra stuff, height, width etc. */
  transform: scale(1) !important;
}

[nlotz63]

Thanks @mbaileys and @skosch. This was a big help.