如何编写一个根据滑块值更改拇指大小的函数？

Question

我对 JavaScript 还很陌生，所以我一直在摸索并自学如何使用这些函数。我正在尝试使用 setInterval 来创建一个函数，根据滑块的值不断更改拇指的大小。

我尝试使用 getElementById 和其他东西，但我无法弄清楚。

这是 HTML：

<input type="range" class="javaRange" id="rangeInput2" name="rangeInput2" min="0" max="1000" value="0"
    oninput="amount2.value=rangeInput2.value">
    <output id="amount2" name="amount2" for="rangeInput2">0</output>

这是 CSS（滑块是自定义的）：

<style>
.javaRange {
  -webkit-appearance: none;
  background-color: #cdfffe;
  height: 20px;
  overflow: visible;
  width: 400px;
  border-radius: 50px;
}



.javaRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #00918f;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}
</style>

这是我目前拥有的 JavaScript：

<script>
const constant = 0.12;
const thumbValue = document.getElementById("rangeInput2").value;
function thumbSize(){
  document.getElementById("rangeInput2").style.width = 20 + parseInt(thumbValue) + "px";
  document.getElementById("rangeInput2").style.height = 20 + parseInt(thumbValue) + "px";
};
setInterval(thumbSize());
</script>

我尝试过很多事情。请帮忙！

Answer 1

您不需要使用

setInterval

；只需在

thumbSize()

处理程序中调用

oninput

即可。

function thumbSize() {
  const ri = document.getElementById("rangeInput2");
  const thumbValue = ri.value;
  const size = 50 + parseInt(thumbValue);
  ri.style.width = ri.style.height = `${size}px`;
};
thumbSize(); // Once, for initialization

.javaRange {
  -webkit-appearance: none;
  background-color: #cdfffe;
  height: 20px;
  overflow: visible;
  width: 400px;
  border-radius: 50px;
}

.javaRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #00918f;
  border-radius: 50%;
  cursor: pointer;
  height: 20px;
  width: 20px;
  border: 0;
}

<input type="range" class="javaRange" id="rangeInput2" name="rangeInput2" min="0" max="1000" value="0" oninput="thumbSize()">