added input style

public/assets/css/main.css

@@ -110,6 +110,38 @@ button.button-label:active,
   color: #222;
   cursor: pointer;
 }
+input[type='range'] {
+  overflow: hidden;
+  width: 100%;
+  outline: none;
+  -webkit-appearance: none;
+  background-color: #ddd;
+}
+input[type='range']::-webkit-slider-runnable-track {
+  height: 10px;
+  -webkit-appearance: none;
+  color: #13bba4;
+  margin-top: -1px;
+}
+input[type='range']::-webkit-slider-thumb {
+  width: 10px;
+  -webkit-appearance: none;
+  height: 10px;
+  cursor: ew-resize;
+  background: #000;
+  box-shadow: -800px 0 0 800px #e22c78;
+}
+/** FF*/
+input[type="range"]::-moz-range-progress {
+  background-color: #e22c78;
+}
+input[type="range"]::-moz-range-track {
+  background-color: #ddd;
+}
+/* IE*/
+input[type="range"]::-ms-fill-lower {
+  background-color: #e22c78;
+}
 .song-row {
   display: grid;
   grid-template-rows: auto 1fr;

public/assets/css/main.less

@@ -112,6 +112,38 @@ button, .button {
         }
     }
 }
+input[type='range'] {
+    overflow: hidden;
+    width: 100%;
+    outline: none;
+    -webkit-appearance: none;
+    background-color: #ddd;
+}
+input[type='range']::-webkit-slider-runnable-track {
+    height: 10px;
+    -webkit-appearance: none;
+    color: #13bba4;
+    margin-top: -1px;
+}
+input[type='range']::-webkit-slider-thumb {
+    width: 10px;
+    -webkit-appearance: none;
+    height: 10px;
+    cursor: ew-resize;
+    background: #000;
+    box-shadow: -800px 0 0 800px rgb(226, 44, 120);
+}
+/** FF*/
+input[type="range"]::-moz-range-progress {
+    background-color: rgb(226, 44, 120); 
+}
+input[type="range"]::-moz-range-track {  
+    background-color: #ddd;
+}
+/* IE*/
+input[type="range"]::-ms-fill-lower {
+    background-color: rgb(226, 44, 120); 
+}
 .song-row {
     display: grid;
     grid-template-rows: auto 1fr;