Question

我正在检索HTML滑块值，以便我可以在我的网页上的其他位置显示它们。我将滑块默认值设置为0，但是当我更改它们后刷新页面时，它们似乎卡在相同的值而不是0。这是一个问题，因为我有滑块值的参考，所以我可以显示它们位于滑块旁边。在刷新时，滑块不会重置为0，但我的内联<span>将显示0.当我按下提交按钮时，滑块会重置为0，最终将获取值并显示它们在我的虚拟网页的另一个区域，但不是刷新时。

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时很好，但如果在滑动时将手指放在鼠标上，则在我松开鼠标按钮之前，该值不会更新。

Answer 1

这可能是在工作时自动完成，请尝试将其关闭

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

Answer 2

对我而言

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

刷新页面时，HTML5滑块控件不会重置为默认值

2 个答案: