.temposlider {
  -webkit-appearance: none;
  width: 20%;
  position:relative;
}

.temposlider::-webkit-slider-runnable-track {
  width: 100%;
  height: 6px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #ffffff;
  border-radius: 21px;
  border: 0.2px solid #010101;
}
.temposlider::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 25px;
  width: 15px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}


.volumeslider {
  -webkit-appearance: none;
  width: 100%;
  margin: 0px 0;
}

.volumeslider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  background: #ffffff;;
  border-radius: 21px;
  border: 0.2px solid #010101;
}
.volumeslider::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 25px;
  width: 15px;
  border-radius: 3px;
  background: #ffffff;;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}