Slider optimized for Firefox

src/scss/cdb-components/forms/sliders.scss

@@ -13,6 +13,8 @@
 @import '../../cdb-variables/colors';
 
 .CDB-Range {
+  -webkit-appearance: none;
+  -moz-appearance: none;
   position: relative;
   width: 100%;
   margin: -4px 0 0;
@@ -21,13 +23,11 @@
   cursor: pointer;
   overflow: hidden;
   vertical-align: middle;
-}
+  border: 0;
 
-.CDB-Range::-webkit-slider-thumb {
-  position: relative;
-  width: $baseSize / 2;
-  height: 100%;
-  border-radius: $baseSize / 2;
+  &:focus {
+    outline: 0;
+  }
 }
 
 .CDB-Range::-webkit-slider-runnable-track {
@@ -37,19 +37,63 @@
   background: $cMainLine;
 }
 
-.CDB-Range::-webkit-slider-thumb::before {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: -3000px;
-  height: $baseSize / 4;
+.CDB-Range::-webkit-slider-thumb {
+  position: relative;
+  width: $baseSize / 2;
+  height: 100%;
   border-radius: $baseSize / 2;
-  background: $cBlue;
-  content: '';
+
+  &::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: -3000px;
+    height: $baseSize / 4;
+    border-radius: $baseSize / 2;
+    background: $cBlue;
+    content: '';
+  }
+
+  &::after {
+    position: absolute;
+    top: -6px;
+    right: -6px;
+    left: -6px;
+    width: $baseSize + 4;
+    height: $baseSize + 4;
+    border: 1px solid $cBlue;
+    border-radius: 50%;
+    background: $cWhite;
+    content: '';
+    z-index: 1;
+  }
+
+  &:focus,
+  &:hover {
+    &::after {
+      cursor: pointer;
+    }
+  }
+
+  &:disabled {
+    &::before,
+    &::after {
+      opacity: 0.2;
+    }
+  }
 }
 
-.CDB-Range::-webkit-slider-thumb::after {
+.CDB-Range::-moz-range-track {
+  height: $baseSize / 4;
+  margin: $baseSize 0;
+  border-radius: $baseSize / 2;
+  background: $cMainLine;
+  border: 0;
+  outline: none;
+}
+
+.CDB-Range::-moz-range-thumb {
   position: absolute;
   top: -6px;
   right: -6px;
@@ -60,22 +104,17 @@
   border-radius: 50%;
   background: $cWhite;
   content: '';
-  z-index: 10;
+  z-index: 1;
 }
 
-.CDB-Range:focus {
-  outline: none;
-}
-
-.CDB-Range:hover::-webkit-slider-thumb::after,
-.CDB-Range:focus::-webkit-slider-thumb::after {
-  cursor: pointer;
-}
-
-.CDB-Range:disabled::-webkit-slider-thumb::before {
-  opacity: 0.2;
-}
-
-.CDB-Range:disabled::-webkit-slider-thumb::after {
-  opacity: 0.2;
-}
+.CDB-Range::-moz-range-progress {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: -3000px;
+  height: $baseSize / 4;
+  border-radius: $baseSize / 2;
+  background: $cBlue;
+  content: '';
+}