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

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) {&nbsp; var min = rangeInputKg.min;&nbsp; var max = rangeInputKg.max;&nbsp; var p = ((from.value - min) / (max - min)) * 100;&nbsp; rangeInputKg.style.backgroundImage =&nbsp; &nbsp; "-webkit-gradient(linear, left top, right top, " +&nbsp; &nbsp; "color-stop(" +&nbsp; &nbsp; p +&nbsp; &nbsp; "%, yellow), " +&nbsp; &nbsp; "color-stop(" +&nbsp; &nbsp; p +&nbsp; &nbsp; "%, black)" +&nbsp; &nbsp; ")";&nbsp; to.value = from.value;}function delay(fn, ms) {&nbsp; let timer = 0;&nbsp; return function(...args) {&nbsp; &nbsp; clearTimeout(timer);&nbsp; &nbsp; timer = setTimeout(fn.bind(this, ...args), ms || 0);&nbsp; };}rangeInputKg.addEventListener("input", e => {&nbsp; rangeProgress(textInputKg, rangeInputKg);});textInputKg.addEventListener(&nbsp; "keyup",&nbsp; delay(e => {&nbsp; &nbsp; rangeProgress(rangeInputKg, textInputKg);&nbsp; }, 500));#range {&nbsp; outline: none;&nbsp; -webkit-appearance: none;&nbsp; width: 100%;&nbsp; height: 15px;&nbsp; border-radius: 10px;&nbsp; background: black;}<input id="range" type="range" max="500" min="10" value="10" autocomplete="off"><input id="text">