如何为一个范围滑块创建事件处理程序？

Question

我正在尝试让一个范围滑块工作，但是我做不到。 如何添加一个事件处理程序，以便当用户选择一个值时，我的代码可以读取该值。现在它的值始终为1。

我想使用纯JavaScript实现这个功能。

HTML：

<div id="slider">
    <input class="bar" type="range" id="rangeinput" min="1" max="25" value="1" onchange="rangevalue.value=value"/>
    <span class="highlight"></span>
    <output id="rangevalue">1</output>
</div>

JAVASCRIPT：

var rangeInput = document.getElementById("rangeinput").value;
var buttonInput = document.getElementById("btn");

if (buttonInput.addEventListener) {
    buttonInput.addEventListener("click", testtest, false);
}
else if (buttonInput.attachEvent) {
    buttonInput.attachEvent('onclick', testtest);
}

function testtest(e) {
    if (rangeInput > 0 && rangeInput < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

JSFIDDLE

- kalpetros

Answer 1

单次读取

问题在于你只在启动时读取一次该值，而不是每次事件发生时读取：

// this stores the value at startup (which is why you're always getting 1)
var rangeInput = document.getElementById("rangeinput").value;

您应该在处理程序中读取该值：

function testtest(e) {
    // read the value from the slider:
    var value = document.getElementById("rangeinput").value;
    // now compare:
    if (value > 0 && value < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

或者重新编写你的代码：

var rangeInput = document.getElementById("rangeinput");
var buttonInput = document.getElementById("btn");

if (buttonInput.addEventListener) {
    buttonInput.addEventListener("click", testtest, false);
}
else if (buttonInput.attachEvent) {
    buttonInput.attachEvent('onclick', testtest);
}

function testtest(e) {
    var value = rangeInput.value;
    if (value > 0 && value < 5) {
        alert("First");
    } else {
        alert("Second");
    }
}

更新 rangevalue

看起来你希望用范围的值更新输出元素。你当前正在通过 ID 引用该元素：

onchange="rangevalue.value=value"

然而，据我所知，这不是标准行为；你不能仅通过元素的 ID 引用它们；你必须通过 DOM 检索元素，然后设置其值。

我可以建议您通过 JavaScript 添加更改监听器:

rangeInput.addEventListener("change", function() {
    document.getElementById("rangevalue").textContent = rangeInput.value;
}, false);

当然，您将不得不更新代码以使用addEventListener或attachEvent，具体取决于您想要支持的浏览器; 这就是JQuery真正有用的地方。

- zastrowm

---

谢谢，它可以工作，但由于某种奇怪的原因，它只在Chrome中有效。 - kalpetros

@KalPetros - 我已更新答案以解决更新输出的问题。 - zastrowm

Answer 2

使用 mouseup 事件实现此功能。

var rangeInput = document.getElementById("rangeinput");

rangeInput.addEventListener('mouseup', function() {
    if (this.value > 0 && this.value < 5) {
        alert("First");
    } else{
        alert("Second");
    }
});

DEMO: http://jsfiddle.net/ZnYjY/1

- iConnor

---

如果用户使用箭头键更改值，这个方法也能起作用吗？ - Philip Eagles

@PhilipEagles 可能不行。不过，onkeyup() 对此可能有效。 - StealthDroid

Answer 3

您可以使用表单的oninput方法：

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="range" name="b" value="50" />100 +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>

这有一个优势，比起“onclick/onmouseup”，它可以处理使用键盘移动滑块的情况（将焦点移至输入框并使用箭头键）。

- SpliFF

Answer 4

使用oninput事件。

HTML代码：

<div id="slider">
    <input class="bar" type="range" id="range-input" min="1" max="25" value="1"/>
    <span class="highlight"></span>
    <output id="range-value">1</output>
</div>
<button id="btn" type="submit">Submit</button>

Javascript脚本

(function() {
 var rangeInput = document.getElementById("range-input")
 var rangeValue = document.getElementById("range-value")
 var button = document.getElementById("btn")
 
 // Show alert message when button clicked
 button.onclick = testTest
 
 function testTest() {
   let value = rangeInput.value
   if(value > 0 && value < 5) {
      alert("first")
      return true
   }
     alert("second")
     return false
 }
 
 // Print the range value to the output
 rangeInput.oninput = rangeOutput
 
 function rangeOutput() {
   rangeValue.innerText = rangeInput.value
 }

})()

演示

更新于2021年

另一种选择是使用输入事件处理程序，即eventTarget.addEventListener("input", alert("Hello World"))，尽管此事件处理程序与oninput相同，但区别在于我们可以使用addEventListener。

- devstatck

---

更新：另一个选项是使用 input 事件处理程序，即 eventTarget.addEventListener("input", alert("Hello World")，虽然这个事件处理程序与 oninput 相同，但不同之处在于我们可以使用 addEventListener。 - devstatck

Answer 5

<script type="text/javascript">
    function range()
    {
//the simplest way i found
    var p = document.getElementById('weight');
    var res = document.getElementById('rangeval');
    res.innerHTML=p.value+ " Lbs";
    }
</script>

  <label for="weight">Your weight in lbs:</label>
  <input name="weight" type="range" id="weight" max="500" min="0" value="75" onChange="range()" onKeyUp="range()">
  <span id="rangeval"></span>

- gourabvarma