input[type="range"] {
   /* removing default appearance */
   -webkit-appearance: none;
   appearance: none; 
   /* creating a custom design */
   cursor: pointer;
   outline: none;
   /*  slider progress trick  */
   overflow: hidden;
   border-radius: 6px;
   transform: rotate(-90deg);
   width: 112px;
   height: 6px;
 }
 
 /* Track: webkit browsers */
input[type="range"]::-webkit-slider-runnable-track {
   height: 60px;
   background: var(--miniPlayer-slider-background);
   border-radius: 11px;
 }
 
 /* Track: Mozilla Firefox */
 input[type="range"]::-moz-range-track {
   height: 60px;
   background: var(--miniPlayer-slider-background);
   border-radius: 11px;
 }
 
 /* Thumb: webkit */
 input[type="range"]::-webkit-slider-thumb {
  /* removing default appearance */
  -webkit-appearance: none;
  appearance: none; 
  /* creating a custom design */
  height: 6px;
  width: 6px;
  background-color: var(--miniPlayer-slider-color);
  border-radius: 50%;
  background: var(--miniPlayer-slider-color);
  border: 2px solid var(--miniPlayer-slider-color);
  /*  slider progress trick  */
  box-shadow: -1407px 0 0 1400px var(--miniPlayer-slider-color);
 }
 
 
 /* Thumb: Firefox */
 input[type="range"]::-moz-range-thumb {
   height: 15px;
   width: 15px;
   border-radius: 50%;
   border: 1px solid var(--miniPlayer-slider-color);

   background: var(--miniPlayer-slider-color);

   /*  slider progress trick  */
   box-shadow: -1407px 0 0 1400px var(--miniPlayer-slider-color);
 }