FIX: Firefox doesn't allow pseudos on inputs (#162)

FIX: Firefox doesn’t allow pseudos on inputs (#162)

diff --git a/assets/javascripts/discourse/widgets/discourse-group-timezones-time-traveler.js.es6 b/assets/javascripts/discourse/widgets/discourse-group-timezones-time-traveler.js.es6
index fe50012..ffdf56f 100644
--- a/assets/javascripts/discourse/widgets/discourse-group-timezones-time-traveler.js.es6
+++ b/assets/javascripts/discourse/widgets/discourse-group-timezones-time-traveler.js.es6
@@ -21,9 +21,11 @@ export default createWidget("discourse-group-timezones-time-traveler", {
     <span class="time">
       {{transformed.localTimeWithOffset}}
     </span>
-    {{attach
-      widget="discourse-group-timezones-slider"
-    }}
+    <span class="discourse-group-timezones-slider-wrapper">
+      {{attach
+        widget="discourse-group-timezones-slider"
+      }}
+    </span>
     {{attach
       widget="discourse-group-timezones-reset"
       attrs=(hash
diff --git a/assets/stylesheets/common/discourse-calendar.scss b/assets/stylesheets/common/discourse-calendar.scss
index 3b524ab..3ec64bf 100644
--- a/assets/stylesheets/common/discourse-calendar.scss
+++ b/assets/stylesheets/common/discourse-calendar.scss
@@ -259,31 +259,35 @@ a.holiday {
   display: none;
 }
 
-.group-timezones-slider {
-  width: 120px;
+.discourse-group-timezones-slider-wrapper {
+  // we need the wrapper because Firefox doesn't allow pseudo selectors on inputs
+  position: relative;
   margin: 0.25em 0;
   margin-right: 0.5em;
+  &::before {
+    display: block;
+    content: "";
+    position: absolute;
+    margin-top: -1px;
+    background: var(--tertiary);
+    height: 2px;
+    top: 50%;
+    width: 100%;
+    z-index: -1;
+  }
+}
+
+.group-timezones-slider {
+  display: flex;
+  width: 120px;
   padding: 0.25em;
   -webkit-appearance: none;
   -moz-appearance: none;
   cursor: pointer;
   font: inherit;
   outline: none;
-  position: relative;
   box-sizing: border-box;
   background-color: transparent;
-  z-index: 1;
-  &::before {
-    background: var(--tertiary);
-    content: "";
-    display: block;
-    height: 2px;
-    position: absolute;
-    top: 50%;
-    margin-top: -1px;
-    width: 100%;
-    z-index: -1;
-  }
 }
 
 .group-timezones-body {

GitHub sha: 9250fd3c33061b09e8774b87ec6f57569137cea8

This commit appears in #162 which was approved by tgxworld. It was merged by awesomerobot.