Leaflet 1.0: fix also dragging map with opacity slider in Chrome;

update slider version; disable text selection while dragging in Firefox; 
no outline in Firefox

bower.json

@@ -1,7 +1,6 @@
 {
   "name": "brouter-web",
   "version": "0.6.3",
-  "main": "dist/**/*",
   "main": [
     "dist/brouter-web.css",
     "dist/brouter-web.js"
@@ -23,7 +22,7 @@
     "leaflet-control-geocoder": "1.5.3",
     "Leaflet.EasyButton": "*",
     "bootbox": "~4.4.0",
-    "seiyria-bootstrap-slider": "~4.8.1",
+    "seiyria-bootstrap-slider": "^9.8.1",
     "url-search-params": "~0.5.0",
     "Leaflet.RestoreView": "makinacorpus/Leaflet.RestoreView#master",
     "leaflet.locatecontrol": "^0.60.0",
@@ -103,7 +102,13 @@
       ]
     },
     "autosize": {
-      "main":  "dist/autosize.js"
+      "main": "dist/autosize.js"
+    },
+    "seiyria-bootstrap-slider": {
+      "dependencies": {
+        "jquery": "*",
+        "bootstrap": "*"
+      }
     }
   },
   "resolutions": {

css/style.css

@@ -151,7 +151,7 @@ https://css-tricks.com/svg-line-animation-works/
 /* invert track and selection styles to get partial gradient for "selection" */
 .slider.slider-vertical .slider-track {
     width: 8px;
-    margin-left: -4px;
+    margin-left: 1px;
     background-image: linear-gradient(to right, #f0f0f0 0%, #e9e9e9 100%);
     box-shadow: inset -1px -0px 1px rgba(55, 55, 55, 0.3), inset 1px 0px 1px rgba(230, 230, 230, 1);
 }
@@ -169,10 +169,10 @@ https://css-tricks.com/svg-line-animation-works/
 
 .slider.slider-vertical .slider-tick,
 .slider.slider-vertical .slider-handle {
-    margin-left: -6px;
     cursor: ns-resize;
     box-sizing: border-box;
     background: none;
+    outline: none;
 
     /* bootstrap .btn-default */
     background-image: linear-gradient(to bottom,#fff 0,#e0e0e0 100%);

js/control/OpacitySlider.js

@@ -15,6 +15,9 @@ BR.OpacitySlider = L.Control.extend({
             value = minOpacity;
         }
 
+        // prevent also dragging map in Chrome
+        L.DomEvent.disableClickPropagation(container);
+
         var stopClickAfterSlide = function(evt) {
             L.DomEvent.stop(evt);
             removeStopClickListeners();
@@ -36,6 +39,9 @@ BR.OpacitySlider = L.Control.extend({
             reversed : true,
             selection: 'before', // inverted, serves as track style, see css
             tooltip: 'hide'
+        }).on('slideStart', function (evt) {
+            // dragging beyond slider control selects zoom control +/- text in Firefox
+            L.DomUtil.disableTextSelection();
         }).on('slide slideStop', { self: this }, function (evt) {
             evt.data.self.options.callback(evt.value / 100);
         }).on('slideStop', function (evt) {
@@ -43,6 +49,8 @@ BR.OpacitySlider = L.Control.extend({
                 localStorage.opacitySliderValue = evt.value;
             }
             
+            L.DomUtil.enableTextSelection();
+
             // When dragging outside slider and over map, click event after mouseup
             // adds marker when active on Chromium. So disable click (not needed) 
             // once after sliding.