Web ページの別の場所に表示できるように、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 に変更すると問題ありませんが、スライド中にマウスを指で離したままにすると、マウス ボタンを放すまで値が更新されません。