HTML5 Slider Controls Not Resetting Back to Default Value When Page is Refreshed

Question

I'm in the process of retrieving HTML slider values so I can display them elsewhere on my webpage. I have the slider default values at 0, but when I refresh the page after I have altered them they seem to be stuck at the same values and not 0. This is a problem as I have a reference to the sliders values so I can display them next to the slider. At the moment when I refresh, the slider will not be reset to 0, but my inline <span> will be displaying 0. The sliders do reset to 0 when my submit button is pressed which will eventually take the values and display them in another area of my dummy webpage, but not when refreshed.

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>

Is there away for the slider value to update a bit faster? Its fine when you quickly click in it and change the value from 0 to 1, but if you keep your finger on the mouse while sliding, the value doesn't update until I let go of the mouse button.

Answer 1

This is probably autocomplete at work, try turning it off

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

Answer 2

for me its working

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