HTML5輸入類型範圍顯示範圍值

我正在做一個網站，我想使用範圍滑塊（我知道它只支持webkit瀏覽器）。HTML5輸入類型範圍顯示範圍值

我已經完全整合了它，並且工作正常。但我想用文本框來顯示當前的幻燈片值。

我的意思是，如果最初的滑塊值爲5，那麼在文本框中它應該顯示爲5，當我滑動文本框中的值應該改變。

我可以只使用CSS或html來做到這一點嗎？我想避免JQuery。可能嗎？

2012-04-04 Niraj Chauhan

你不能這樣做沒有JavaScript。 – mrtsherman 2012-04-04 05:12:22

你可以*使用'：before' /'：after'，'content'和'attr（）'來做這個事情，就像[this]（http://jsfiddle.net/hVvK2/）一樣。然而，之前/之後的僞元素實際上吃掉了某些滑塊的範圍（儘管也許這是可以修復的），最重要的是，如果滑塊被操縱，則值不會更新。儘管如此，我認爲將此留在這裏會很有趣。未來可能會變得可能。 – waldyrious 2013-07-02 15:47:14

修復@waldir的解決方案導致http://jsfiddle.net/RjWJ8/，儘管它仍然使用JavaScript更新屬性的值屬性。 – user1277170 2014-03-20 15:21:21

這使用JavaScript，而不是直接jQuery。它可能會幫助你開始。

function updateTextInput(val) { 
 
      document.getElementById('textInput').value=val; 
 
     }

<input type="range" name="rangeInput" min="0" max="100" onchange="updateTextInput(this.value);"> 
 
<input type="text" id="textInput" value="">

來源

2012-04-04 04:19:19 ejlepoud

但無論如何要做到這一點沒有JavaScript或jQuery的？ – 2012-04-04 04:26:58

+14

這是來自http://mobile-web-app.blogspot.com/2012/03/easy-display-value-for-of-slider-in.html，仍然是JavaScript。 'code' 範圍 5 – ejlepoud 2012-04-04 04:48:12

+25

有沒有人認爲提供盲目的滑塊是缺乏的。誠然，提供花哨的小部件不是基本標準的作用，但顯示選定的值是這個小部件的核心，所以我認爲（可選）顯示基本形式中的數字，例如在滑動手柄頂部的工具提示使更好的設計。 – 2013-04-07 01:28:33

119

對於那些誰仍在尋找沒有單獨的JavaScript代碼的解決方案。有沒有編寫JavaScript或jQuery的功能有點簡單的解決方案：

<form name="registrationForm"> 
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="100" oninput="ageOutputId.value = ageInputId.value"> 
    <output name="ageOutputName" id="ageOutputId">24</output> 
</form>

JsFiddle Demo

如果你想顯示在文本框中的值，只需更改輸出輸入。

更新：

It is still Javascript written within your html, you can replace the bindings with below JS code:

document.registrationForm.ageInputId.oninput = function(){ 
    document.registrationForm.ageOutputId.value = document.registrationForm.ageInputId.value; 
}

無論是使用元素的ID或名稱，無論是在現代瀏覽器的支持。

來源

2013-09-21 18:52:05

很有創意... – 2013-11-06 01:46:03

+1知道我知道。唯一的問題是，E.I不支持它。（W3School）http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_output – radbyx 2014-06-14 12:21:47

它仍然是javascript，綁定輸入表單元素比輸入元素本身更糟糕。 – cuixiping 2014-10-20 00:19:45

一個更好的辦法是捉對輸入本身，而不是整個表格（性能明智）輸入事件：

<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0" 
     oninput="amount.value=rangeInput.value">              

<output id="amount" name="amount" for="rangeInput">0</output>

這裏有一個fiddle（與id添加爲每萊恩的評論）。

來源

2014-01-19 11:06:14

在Firefox 27中，直到我爲輸出添加'id =「amount」'後，這對我才起作用。 – Ryan 2014-03-20 04:38:39

這應該工作沒有ID： 'oninput =「this.form.amount.value = this.value」' – d1Mm 2014-04-11 02:44:59

這工作，但我如何獲得當前值並顯示它當頁面刷新？： -/ – user2513846 2015-09-03 20:30:53

版本編輯輸入：

<form> 
    <input type="range" name="amountRange" min="0" max="20" value="0" oninput="this.form.amountInput.value=this.value" /> 
    <input type="number" name="amountInput" min="0" max="20" value="0" oninput="this.form.amountRange.value=this.value" /> 
</form>

http://jsfiddle.net/Xjxe6/

來源

2014-04-11 03:12:31 d1Mm

用'this.nextElementSibling'或'this.previousElementSibling'替換表單變量，並用onchange替換ininput以獲取在表單外工作的版本。 http://jsfiddle.net/Xjxe6/94/ – 2015-03-23 20:45:27

如果你想顯示在滑塊下方的電流值，並與它一起移動，試試這個：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>MySliderValue</title> 
 

 
</head> 
 
<body> 
 
    <h1>MySliderValue</h1> 
 

 
    <div style="position:relative; margin:auto; width:90%"> 
 
    <span style="position:absolute; color:red; border:1px solid blue; min-width:100px;"> 
 
    <span id="myValue"></span> 
 
    </span> 
 
    <input type="range" id="myRange" max="1000" min="0" style="width:80%"> 
 
    </div> 
 

 
    <script type="text/javascript" charset="utf-8"> 
 
var myRange = document.querySelector('#myRange'); 
 
var myValue = document.querySelector('#myValue'); 
 
var myUnits = 'myUnits'; 
 
var off = myRange.offsetWidth/(parseInt(myRange.max) - parseInt(myRange.min)); 
 
var px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetParent.offsetWidth/2); 
 

 
    myValue.parentElement.style.left = px + 'px'; 
 
    myValue.parentElement.style.top = myRange.offsetHeight + 'px'; 
 
    myValue.innerHTML = myRange.value + ' ' + myUnits; 
 

 
    myRange.oninput =function(){ 
 
    let px = ((myRange.valueAsNumber - parseInt(myRange.min)) * off) - (myValue.offsetWidth/2); 
 
    myValue.innerHTML = myRange.value + ' ' + myUnits; 
 
    myValue.parentElement.style.left = px + 'px'; 
 
    }; 
 
    </script> 
 

 
</body> 
 
</html>

請注意，此類型的HTML輸入元素具有一個隱藏功能，例如，當元素具有焦點時，可以使用左/右/下/上箭頭鍵移動滑塊。與Home/End/PageDown/PageUp鍵相同。
1：

來源

2016-02-14 11:12:47 drugan

<form name="registrationForm"> 
 
    <input type="range" name="ageInputName" id="ageInputId" value="24" min="1" max="10" onchange="getvalor(this.value);" oninput="ageOutputId.value = ageInputId.value"> 
 
    <input type="text" name="ageOutputName" id="ageOutputId"></input> 
 
</form>

來源

2016-10-09 17:11:07 luis

錯誤：{ 「message」：「Uncaught ReferenceError：getvalor is not defined」，「filename」：「https://stacksnippets.net/js」，「 lineno「：12，」colno「：169 } – Darush 2017-07-29 01:33:16

，如果您還在爲尋找答案，你可以在地方型的使用INPUT TYPE =「號」 =「範圍」最小值最大值工作，如果它的順序設置-name
2-的maxlength
3-大小
4分鐘
5-MAX
只是將它複製

<input name="X" maxlength="3" size="2" min="1" max="100" type="number" />

來源

2017-01-18 23:05:11

如果您使用多張幻燈片，你可以使用jQuery，你可以做後續輕鬆處理多個滑塊：

function updateRangeInput(elem) { 
 
    $(elem).next().val($(elem).val()); 
 
}

input { padding: 8px; border: 1px solid #ddd; color: #555; display: block; } 
 
input[type=text] { width: 100px; } 
 
input[type=range] { width: 400px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="0"> 
 
<input type="text" value="0"> 
 

 
<input type="range" min="0" max="100" oninput="updateRangeInput(this)" value="50"> 
 
<input type="text" value="50">

此外，通過在<input type='range'>上使用oninput，您將在拖動範圍時收到事件。

來源

2017-07-20 09:21:16

HTML5輸入類型範圍顯示範圍值

回答

相關問題