Как исправить пользовательский прогресс ползунка диапазона, не следуя за ползунком ввода диапазона?

Question

Я пытаюсь создать пользовательский бегунок диапазона с индикатором прогресса , используя jQuery в HTML / CSS для браузера Google Chrome. Я хочу создать диапазон типов ввода с индикатором выполнения, который следует за ползунком ввода, не таким, как мой пользовательский диапазон ввода.

Мой код указан ниже:

var range2 = $("#newSlider");
var progressBar2 = $(".progressslider");
$(range2).on("input change", function() {
  progressBar2.css("width", $(this).val() + "%");
  rangeValue.text($(this).val() + "%");
});

.boxslider {
  width: 400px;
  position: relative;
}

#newSlider {
  -webkit-appearance: none;
  width: 400px;
  height: 20px;
  background-color: black;
  outline: none;
  cursor: pointer;
}

#newSlider::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  background-color: rgb(243, 12, 12);
  border-radius: 50%;
  -webkit-appearance: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
}

.progressslider {
  width: 10px;
  height: 20px;
  background-color: rgb(224, 84, 91);
  position: absolute;
  top: 2px;
  left: 0;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxslider">
  <input type="range" id="newSlider" min="0" max="100" value="5">
  <div class="progressslider"></div>
</div>

Answer 1

изменить rangeValue на $ (это)

var range2 = $("#newSlider");
var progressBar2 = $(".progressslider");
$(range2).on("input change", function() {
  progressBar2.css("width", $(this).val() + "%");
	console.log(this)
  $(this).text($(this).val() + "%");
});

.boxslider {
  width: 400px;
  position: relative;
}

#newSlider {
  -webkit-appearance: none;
  width: 400px;
  height: 20px;
  background-color: black;
  outline: none;
  cursor: pointer;
}

#newSlider::-webkit-slider-thumb {
  width: 30px;
  height: 30px;
  background-color: rgb(243, 12, 12);
  border-radius: 50%;
  -webkit-appearance: none;
  position: relative;
  z-index: 5;
  cursor: pointer;
}

.progressslider {
  width: 10px;
  height: 20px;
  background-color: rgb(224, 84, 91);
  position: absolute;
  top: 2px;
  left: 0;
  pointer-events: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="boxslider">
  <input type="range" id="newSlider" min="0" max="100" value="5">
  <div class="progressslider"></div>
</div>