input[type=range] {
  -webkit-appearance: none;
  margin: 18px 0;
  width: 100%;
}

input[type=range]:focus {
  outline: none !important;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 3px;
  border-radius: 3px;
  cursor: pointer;
  background: #50d8a3;
  
  transition: all 0.15s linear;
}

input[type=range]::-webkit-slider-thumb {
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: #fff;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.2);
  
  transition: all 0.15s linear;
  
}

input[type=range]::-webkit-slider-thumb:hover {
    background: #f5f5f5;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #34b784;
}

input[type=range]::-moz-range-track {
  width: 100%;
  height: 3px;
  border-radius: 3px;
  cursor: pointer;
  background: #50d8a3;
  
  transition: all 0.15s linear;
}

input[type=range]::-moz-range-thumb {
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: #fff;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.2);
  
  transition: all 0.15s linear;
}

input[type=range]::-ms-track {
  width: 100%;
  height: 3px;
  border-radius: 3px;
  cursor: pointer;
  background: #50d8a3;
  
  transition: all 0.15s linear;
}

input[type=range]::-ms-fill-lower {
  background: #50d8a3;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
  background: #50d8a3;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -8px;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  background: #fff;
  box-shadow: 0 5px 5px rgba(0,0,0,0.1), 0 2px 2px rgba(0,0,0,0.2);
  
  transition: all 0.15s linear;
}