如何显示当前值？

我使用这个代码：如何显示当前值？

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

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

来源

2013-07-25 user2619381

什么也不做。显示当前值*（在Chrome中，它由滑块栏内的手柄位置表示）。 – Quentin

它doesn.tnd这种输入类型都工作在Firefox我猜。 – user2619381

如果你想显示具体的数字，你可以有一个跨度或东西超过输入，并使用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

来源

2013-07-25 18:10:48 Charles380

好吧，假设我想将当前值乘以一个预先指定的数字，然后显示它。那么这个函数是什么？ – user2619381

它就像在jQuery中那样简单，我有.text（test.val（））。我很困惑你试图用滑块实际值不够好。您可以设置最小和最大特定值，并且您可以执行一个步骤，以便只显示某些数字。你需要乘以 – Charles380

我这样做： - 数量*价格（每1条） – user2619381

的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">

来源

2013-07-25 18:21:34 federicot

好吧，假设我想将当前值乘以一个预先指定的数字，然后显示它。那么这个函数是什么？ – user2619381

如何显示当前值？

回答

相关问题