設置窗體上的設置步驟值Slider

我已經在HTML5中創建了表單滑塊。此刻它會根據滑塊的步驟設置顯示數值。我想在滑塊的特定步驟中顯示文本句子旁邊的值。設置窗體上的設置步驟值Slider

我現在它的代碼：

<input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" /> 
<span id="range">0</span> 
<script type="text/javascript"> 
function showValue(newValue) 
{ 
    document.getElementById("range").innerHTML=newValue; 
} 
</script>

來源

2014-01-19 Ben

你可以使用一個swicth /情況是這樣的：

<head> 
    <script type="text/javascript"> 

     function showValue(newValue) 
     { 
      var sentence = ""; 

      switch (newValue) { 
       case "10": 
        sentence = ": Your sentence for step 10"; 
        break; 
       case "25": 
        sentence = ": Another sentence for step 25"; 
        break; 
      } 
      document.getElementById("range").innerHTML = newValue + sentence; 
     } 
    </script> 
</head> 
<body> 
    <input type="range" min="0" max="50" value="0" step="5" onchange="showValue(this.value)" /> 
    <span id="range">0</span> 
</body>

來源

2014-01-19 10:54:00

感謝您的支持。如果我可以，還有一個問題，在滑塊下面我有一個引導按鈕行。有沒有一種方法可以將選定的「步驟」作爲URL變量傳遞，以便我可以在後面的頁面中檢索它。 – Ben

如果你的按鈕獲得一個頁面，你可以將你的變量作爲查詢字符串傳遞。在document.getElementById（「range」）。innerHTML = newValue +句子之後添加此內容。： var current_link = document.getElementById（「my_button」）。href; document.getElementById（「my_button」）。href = current_link +「？step =」+ newValue; –

只需在一個if或switch語句添加：

function showValue(newValue) 
{ 
    // If our passed in value is equal to 50, set the HTML 
    if (newValue == 50) 
     document.getElementById("range").innerHTML=newValue; 
    // Otherwise clear the HTML 
    else 
     document.getElementById("range").innerHTML=''; 
}

function showValue(newValue) 
{ 
    switch (newValue) { 
     case 50: 
      document.getElementById("range").innerHTML=newValue; 
      break; 
     default: 
      document.getElementById("range").innerHTML=''; 
      break; 
    } 
}

來源

2014-01-19 10:27:18

我不同意這裏的答案。在大多數情況下，將文本內容放置在JS內部是不好的做法。其次，如果要顯示的文本是範圍值的重要描述部分，則應使用數據專家來使其可訪問。

這意味着你的HTML可能看起來像這樣：

<div class="range-output"> 
    <label for="range">label</label> 
    <input id="range" name="range" list="range-list" type="range" value="0" step="10" max="50" /> 
    <datalist id="range-list"> 
     <select> 
      <option value="0" label="low"></option> 
      <option value="20" label="middle"></option> 
      <option value="50" label="high"></option> 
     </select> 
    </datalist> 
</div>

和你的JS（我使用jQuery在這裏），看起來是這樣的：

$('div.range-output').each(function() { 
    var range = $('input[type="range"]', this); 
    var output = $('<span class="output" />').appendTo(this); 
    var updateOutput = function() { 
     var val = range.prop('value'); 
     var valLabel = $(range.prop('list')).find('option[value="' + val + '"]').prop('label'); 
     output.html(valLabel || val); 
    }; 
    range.on('input', updateOutput).each(updateOutput); 
});

要回答你的第二個問題：input [type =「range」]是一個正常的窗體控件。您可以簡單地命名它並將其放入表單屬性中。而不是使用按鈕樣式的錨點使用按鈕[type =「submit」]，你就完成了。如果您無法將按鈕和/或輸入[type =「range」]放入表單中。您可以使用表單屬性將它們與表單相關聯。

這裏是一個簡單的小提琴，展示上面的代碼：

來源

2014-01-19 13:36:18

設置窗體上的設置步驟值Slider

回答

相關問題