4

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

查询：

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

4

2 回答 2

11

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

<input autocomplete="off" id="slider01" type="range" name="slider1" min="0" max="10" value="0"><span id="value">0</span>
于 2013-10-20T20:12:45.343 回答
1

对我来说它的工作

<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-04T23:31:23.760 回答