HTML5滑塊控件在刷新頁面時不會重置爲默認值

我正在檢索HTML滑塊值，因此我可以在網頁的其他地方顯示它們。我有滑塊默認值爲0，但當我改變它們後刷新頁面，他們似乎被卡住在相同的值，而不是0.這是一個問題，因爲我有一個滑塊值的引用，所以我可以顯示他們旁邊的滑塊。在我刷新的那一刻，滑塊不會重置爲0，但我的內聯<span>將顯示0.當我按下提交按鈕時，滑塊會重置爲0，最終會將這些值顯示在另一個區域我的虛擬網頁，但沒有刷新。HTML5滑塊控件在刷新頁面時不會重置爲默認值

JQuery的：

// Retrieve the value from slider one 
$("#submit").on('click', function(evt) { 
    var sliderValue = $('#slider01').val(); 
    var sliderValue2 = $('#slider02').val(); 
    alert("The value of slider 1 is: " + sliderValue); 
}); 
// Output to the value of slider one 
$("#slider01").on('click',function(evt) { 
    var sliderVal = $(this).val(); 
    $("#value").text(sliderVal); 
});

HTML：

<input id="slider01" type="range" name="slider1" min="0" max="10" value="0"><span id="value">0</span>

有沒有去滑塊值更快地更新了一下？當您快速點擊它並將值從0更改爲1時，它很好，但是如果您在滑動時將手指放在鼠標上，則值不會更新，直到放開鼠標按鈕。

來源

2013-10-20 user1574598

這可能是自動完成的工作，試圖關閉它

<input autocomplete="off" id="slider01" type="range" name="slider1" min="0" max="10" value="0"><span id="value">0</span>

來源

2013-10-20 20:12:45 Musa

謝謝！這是一種享受。你可能沒有看到我留言的其餘部分，因爲我正在回答時進行了編輯和提交：有沒有爲滑塊值更新更快一點？當您快速點擊它並將值從0更改爲1時，它很好，但是如果您在滑動時將手指放在鼠標上，則值不會更新，直到放開鼠標按鈕。 – user1574598

@ user1574598這是因爲當點擊發生時產生點擊事件，其包括鼠標向下和鼠標向上。而不是單擊事件嘗試更改事件。 – Musa

查看API文檔後，我設法找到了正確的事件：'mousemove'。謝謝。 – user1574598

對我來說它的工作

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 
     <script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
     <label for="amount">Price range:</label> 
     <input type="text" id="Minamount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
            <input type="text" id="Maxamount" readonly style="border:0; color:#f6931f; font-weight:bold;"> 
           <div id="slider-range"></div> 

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 
     <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> 
     <script> 
      $(function() { 
      $("#slider-range").slider({ 
       range: true, 
       min: 0, 
       max: 5000, 
       values: [ 0, 5000 ], 
       slide: function(event, ui) { 
       // console.log(event); 
       // console.log(ui); 

       // $("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]); 
       // $("#mySlider").slider("value", $("#mySlider").slider("option", "min")); 
       $("#Minamount").val(ui.values[0]); 
       $("#Maxamount").val(ui.values[1]); 
       } 
      }); 

      $("#Minamount").val($("#slider-range").slider("values", 0)); 
      $("#Maxamount").val($("#slider-range").slider("values", 1)); 
      }); 
      </script>

來源

2018-01-04 23:31:23 Darkcoder

HTML5滑塊控件在刷新頁面時不會重置爲默認值

回答

相關問題