html - 如何显示当前值？

Question

我正在使用这段代码：

<input type="range" min="1" max="100" name="points">

如何在滑块中显示当前值？

Answer 1

如果你想显示具体的数字，你可以在输入之上有一个跨度或其他东西，并使用 jquery 来处理 onchanged 事件。

HTML：

Price: <input id="price" type="text" value="10.50" readonly /><br/> 
Quantity: <input id="qty" type="text" value="1" readonly />
<input id="rangePoints" type="range" min="1" max="100" value="1"/><br/><br/> 

Total Price: <input type="text" id="total" readonly />

JS：

$(function() {
    $("#rangePoints").change(function() { 
        var qty = $("#rangePoints").val(); 
        var price = $("#price").val();
        $("#qty").val(qty);
        $("#total").val(qty*price);
    });
});

工作 JsFiddle

Answer 2

范围输入类型仅受较新的浏览器支持。但是通过一点 JavaScript 魔法，您也可以让旧版浏览器也可以访问它，您甚至不需要jQuery就可以做到这一点。

在 JavaScript 中，添加以下代码段：

function updateCurrentValue(val) {
    document.getElementById('currentValue').value=val; 
}

然后，在 HTML 中添加另一个输入元素以显示滑块的当前值：

<input type="range" min="1" max="100" name="points" onchange="updateCurrentValue(this.value);">                                                       
Current value: <input type="text" id="currentValue">