input[type=range] {
  width: 100%;
  background: transparent;
  -webkit-appearance: none;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  background: var(--track-bg);
  border: 0;
  border-radius: 8px;
  width: 100%;
  height: 8px;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  margin-top: calc(var(--thumb-height) / 3 * -1);
  width: var(--thumb-width);
  height: var(--thumb-height);
  background: var(--thumb-bg);
  border: 0;
  cursor: pointer;
  -webkit-appearance: none;
  transform: var(--thumb-transform);
}

input[type=range]::-moz-range-track {
  background: var(--track-bg);
  border: 0;
  border-radius: 8px;
  width: 100%;
  height: 8px;
  cursor: pointer;
}
input[type=range]::-moz-range-progress {
  background: var(--progress-bg);
  border: 0;
  border-radius: 8px;
  width: 100%;
  height: 8px;
  cursor: pointer; 
}
input[type=range]::-moz-range-thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  background: var(--thumb-bg);
  border: 0;
  cursor: pointer;
  transform: var(--thumb-transform);
}
input[type=range]::-ms-track {
  background: transparent;
  border-color: transparent;
  border-width: 8px 0;
  color: transparent;
  width: 100%;
  height: 8px;
  cursor: pointer;
}
input[type=range]::-ms-fill-lower {
  background: var(--progress-bg);
  border: 0;
  border-radius: 16px;
}
input[type=range]::-ms-fill-upper {
  background: var(--track-bg);
  border: 0;
  border-radius: 16px;
}
input[type=range]::-ms-thumb {
  width: var(--thumb-width);
  height: var(--thumb-height);
  background: var(--thumb-bg);
  border: 0;
  cursor: pointer;
  margin-top: 0px;
  transform: var(--thumb-transform);
}
input[type=range]:focus::-ms-fill-lower {
  background: var(--progress-bg);
}
input[type=range]:focus::-ms-fill-upper {
  background: var(--track-bg);
}

@supports (-ms-ime-align:auto) {
  input[type=range] {
    margin: 0;
  }
}

:root {
  --track-bg: #f0f0f0;
  --progress-bg: var(--pm-color);
  --thumb-bg: url('/img/loc.svg') no-repeat 0px 2px;
  --thumb-width: 24px;
  --thumb-height: 24px;
  --thumb-transform: scale(1.5);
}