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);
    });
});

Working JsFiddle

Answer 2

只有较新的浏览器支持range input type。但是有了一些JavaScript魔法，你也可以让它适用于较老的浏览器，你甚至不需要jQuery就可以了。

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

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

然后，在HTML中添加另一个input element，以显示滑块的当前值：

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

如何显示当前值？

2 个答案: