在键盘上设置范围滑块进度

Question

所以我得到了输入类型范围，它工作正常，输入框，当用户输入数字 10-500 它在范围上设置值，我需要在范围内设置进度的颜色。现在它显示了以前的值。var textInputKg = document.getElementById("text");var rangeInputKg = document.getElementById("range");function rangeProgress(to, from) {  var min = rangeInputKg.min;  var max = rangeInputKg.max;  var value = rangeInputKg.value;  var p = ((value - min) / (max - min)) * 100;  rangeInputKg.style.backgroundImage =    "-webkit-gradient(linear, left top, right top, " +    "color-stop(" +    p +    "%, yellow), " +    "color-stop(" +    p +    "%, black)" +    ")";  to.value = from.value;}function delay(fn, ms) {  let timer = 0;  return function(...args) {    clearTimeout(timer);    timer = setTimeout(fn.bind(this, ...args), ms || 0);  };}rangeInputKg.addEventListener("input", e => {  rangeProgress(textInputKg, rangeInputKg);});textInputKg.addEventListener(  "keyup",  delay(e => {    rangeProgress(rangeInputKg, textInputKg);    console.log(textInputKg.value);  }, 500));#range {  outline: none;  -webkit-appearance: none;  width: 100%;  height: 15px;  border-radius: 10px;  background: black;}<input id="range" type="range" max="500" min="10" value="10" autocomplete="off"><input id="text">

Answer 1

使用from参数值

var p = ((value - min) / (max - min)) * 100;

到

var p = ((from.value - min) / (max - min)) * 100;

var textInputKg = document.getElementById("text");

var rangeInputKg = document.getElementById("range");

function rangeProgress(to, from) {

  var min = rangeInputKg.min;

  var max = rangeInputKg.max;

  var p = ((from.value - min) / (max - min)) * 100;

  rangeInputKg.style.backgroundImage =

    "-webkit-gradient(linear, left top, right top, " +

    "color-stop(" +

    p +

    "%, yellow), " +

    "color-stop(" +

    p +

    "%, black)" +

    ")";

  to.value = from.value;

}

function delay(fn, ms) {

  let timer = 0;

  return function(...args) {

    clearTimeout(timer);

    timer = setTimeout(fn.bind(this, ...args), ms || 0);

  };

}

rangeInputKg.addEventListener("input", e => {

  rangeProgress(textInputKg, rangeInputKg);

});

textInputKg.addEventListener(

  "keyup",

  delay(e => {

    rangeProgress(rangeInputKg, textInputKg);

  }, 500)

);

#range {

  outline: none;

  -webkit-appearance: none;

  width: 100%;

  height: 15px;

  border-radius: 10px;

  background: black;

}

<input id="range" type="range" max="500" min="10" value="10" autocomplete="off">

<input id="text">