jQuery toggleClass example

Toggle class name on click in jQuery

by Sascha

HTML

<input class="d-inline-block volume" type="range" name="volume0" id="volume0" data-id="0" min="0" max="1" value="0.5" step="0.01">
<br />
<img src="https://prototype.demixr.com/media/ruler.png" alt="slider steps" class="levels_steps">

CSS

.volume {
  -webkit-appearance: none;
  width: 120px;
  background: transparent;
}

.volume:focus {
  outline: none;
}

.volume::-webkit-slider-runnable-track {
  height: 5px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 0)), color-stop(12%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 1)), color-stop(88%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -o-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: -ms-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
}

.volume::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 1px solid #444;
  width: 30px;
  height: 16px;
  text-align: center;
  margin-top: -5.5px;
  background: url("https://prototype.demixr.com/media/slider.png") center no-repeat;
}

input[type=range]::-moz-range-track {
  height: 5px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0);
  background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, 1) 12%, rgba(0, 0, 0, 1) 88%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0,...