1 files changed, 139 insertions, 0 deletions
diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
new file mode 100644
index 00000000..7ede4415
--- /dev/null
+++ b/src/sass/components/sliders.scss
@@ -0,0 +1,139 @@
+// --------------------------------------------------------------
+// Slider inputs - <input type="range">
+// --------------------------------------------------------------
+
+.plyr--full-ui input[type='range'] {
+    // WebKit
+    -webkit-appearance: none; /* stylelint-disable-line */
+    background: transparent;
+    border: 0;
+    border-radius: ($plyr-range-thumb-height * 2);
+    // color is used in JS to populate lower fill for WebKit
+    color: $plyr-range-fill-bg;
+    cursor: pointer;
+    display: block;
+    height: $plyr-range-max-height;
+    margin: 0;
+    padding: 0;
+    transition: box-shadow 0.3s ease;
+    width: 100%;
+
+    &::-webkit-slider-runnable-track {
+        @include plyr-range-track();
+    }
+
+    &::-webkit-slider-thumb {
+        @include plyr-range-thumb();
+        -webkit-appearance: none; /* stylelint-disable-line */
+        margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
+    }
+
+    // Mozilla
+    &::-moz-range-track {
+        @include plyr-range-track();
+    }
+
+    &::-moz-range-thumb {
+        @include plyr-range-thumb();
+    }
+
+    &::-moz-range-progress {
+        background: currentColor;
+        border-radius: ($plyr-range-track-height / 2);
+        height: $plyr-range-track-height;
+    }
+
+    // Microsoft
+    &::-ms-track {
+        @include plyr-range-track();
+        color: transparent;
+    }
+
+    &::-ms-fill-upper {
+        @include plyr-range-track();
+    }
+
+    &::-ms-fill-lower {
+        @include plyr-range-track();
+
+        background: currentColor;
+    }
+
+    &::-ms-thumb {
+        @include plyr-range-thumb();
+        // For some reason, Edge uses the -webkit margin above
+        margin-top: 0;
+    }
+
+    &::-ms-tooltip {
+        display: none;
+    }
+
+    // Focus styles
+    &:focus {
+        outline: 0;
+    }
+
+    &::-moz-focus-outer {
+        border: 0;
+    }
+
+    &.plyr__tab-focus {
+        &::-webkit-slider-runnable-track {
+            @include plyr-tab-focus();
+        }
+
+        &::-moz-range-track {
+            @include plyr-tab-focus();
+        }
+
+        &::-ms-track {
+            @include plyr-tab-focus();
+        }
+    }
+
+    // Pressed styles
+    &:active {
+        &::-webkit-slider-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-moz-range-thumb {
+            @include plyr-range-thumb-active();
+        }
+
+        &::-ms-thumb {
+            @include plyr-range-thumb-active();
+        }
+    }
+}
+
+// Video range inputs
+.plyr--full-ui.plyr--video input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background: $plyr-video-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background: $plyr-video-range-track-bg;
+    }
+
+    &::-ms-track {
+        background: $plyr-video-range-track-bg;
+    }
+}
+
+// Audio range inputs
+.plyr--full-ui.plyr--audio input[type='range'] {
+    &::-webkit-slider-runnable-track {
+        background: $plyr-audio-range-track-bg;
+    }
+
+    &::-moz-range-track {
+        background: $plyr-audio-range-track-bg;
+    }
+
+    &::-ms-track {
+        background: $plyr-audio-range-track-bg;
+    }
+}