Broken in Microsoft Edge

[Lknechtli]

In Microsoft edge, the section of the slider that you grab is not visible / grabbable.

[gmaclennan]

Thanks for opening an issue for this. This was a known limitation when I first wrote this and still needs a fix, ideally by someone with Windows and Microsoft Edge :)

[Lknechtli]

I ended up implementing my own version of the library because we needed a bit more flexibility.
I found that the easiest way to implement the slider portion was just to not use a range input since styling it is so painful across browsers.
Divs + mouse move events is not quite as responsive, but it's virtually impossible to tell unless you've got a LOT going on.

[chriszrc]

Any chance you could share your fork, or create a pull request, I can't use this library if it doesn't support IE :'(

Also, given the state of slider-thumb support, I think @Lknechtli's approach might be a better way to go:
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-thumb
https://developer.mozilla.org/en-US/docs/Web/CSS/::-ms-thumb

[Lknechtli]

@chriszrc
We haven't pulled it out into a library, and it's kind of a half-baked concept right now.
If you're interested in the ideas I was toying with, you can take a look at this:
https://github.com/raster-foundry/raster-foundry/tree/develop/app-frontend/src/app/components/map/labMap
Commit where I ripped out SbS and implemented the version we're using now: raster-foundry/raster-foundry@16ad769
Most relevant are the frame, frameview, and divider.
Basic idea was to be able to support arbitrary masking - features suck as rotating the divider using a handle, or a grid view, but other tasks have taken priority in the meantime.
If you have any questions, or are interested in improving and turning it into a library yourself, feel free to contact me using the email on my profile

[m-mohr]

I tried to fix this, but Edge doesn't seem to allow this natively without many JS side workarounds. Setting an absolute position on the range slider simply breaks the events on the thumb in Edge. It doesn't respond any longer. Positioning it with a container element helps with this, but that has two side-effects:

1. The thumb image doesn't scale correctly.
2. The range slider events are triggered on those parts on the map that are overlapped by the range slider. Therefore you can't completely interact with the map.

[gspettel]

I'm using the plugin on an internal project, and it works well for us (Edge, Chrome, Safari and FF) with the following css changes :

.leaflet-sbs-range {
position:relative;
background:none;
height:40px;
pointer-events:auto;
z-index:1500;
}

.leaflet-sbs {
position:absolute;
height:100%;
width:100%;
z-index:1500;
}

[m-mohr]

@gspettel That doesn't work for me in neither Edge nor Chrome. It doesn't even show the range button any longer in Chrome. Do you have a hosted working example somewhere? Or the working code on GitHub? I must have missed something or its just working in some cases...

[chriszrc]

Looks like mapbox has a nice one now:

https://github.com/mapbox/mapbox-gl-compare

Officially supported too - https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/

[Lknechtli]

I've been experimenting with the mapbox slider on side projects for a bit.
My impressions:

That slider has performance issues, because it requires rendering two whole maps at the same time, and hiding parts of each of them. Performance issues when rotating the map while the view angle is not straight down are the most apparent - the two sides of the map will frequently get out of sync while rendering and it's very clear that one side of the map is following the other. The performance issues mostly happen on my computer when you've zoomed in to about the state level.

It also has some other odd issues - when zooming using a shift+click+drag, the box that is drawn will not carry across the two halves of the map. Any interactions on mouse click + drag need to be reported to both sides and duplicated on both maps in order for it to look seamless, and the plugin doesn't do a very good job at it. Basemap tiles are requested twice, even if they are the same on both maps, etc.
On the plus side, as far as I can tell it works on every browser that mapbox does.

I stuck up a simple app (wip) which can compare two TMS layer urls using the slider here, you can see for yourself. https://lknechtli.github.io/elm-map-compare/
I suspect that the performance issues for this app stem from a combination of using a TMS basemap (as opposed to a vector layer) and the full screen map application. For smaller maps I haven't noticed as much of an impact.