Search and Top Navigation
#15315 new bug ()
Opened October 12, 2018 04:22PM UTC
Last modified October 25, 2018 01:54PM UTC
Slider handle "sticks" to mouse and does not release
Reported by: | RussellJonesPersonal | Owned by: | |
---|---|---|---|
Priority: | minor | Milestone: | none |
Component: | ui.slider | Version: | 1.12.1 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
In Chrome, the slider handle doesn't release every time.
Description:
- After sliding the handle (and/or clicking the range to move the slider handle) and releasing the mouse, the slider handle does not "release" from the horizontal mouse position. It follows the mouse even if the mouse is not clicked.
- Sometimes double-clicking on body or document outside the .slider element releases the mouse, but not always
- Sometimes focusing the mouse on another field or input releases it, but not always
- Sometimes neither of these things works and the only solution is refreshing the page
- Sometimes the bug doesn't occur until you've moved the slider value 2-3 times
I have pasted my HTML and script below - it produces no console errors and I can't find a problem in it. Removing the custom elements of this script does not seem to prevent the error.
#!text/html <div class="slider"> <div id="distance_slider"></div> </div> <div class="text"> <input id="distance_input" class="form-control" type="tel" /> </div>
$(function () { $("#distance_slider").slider({ min: 10, max: 260, step: 10, value: 50, range: "min", slide: function( event, ui ) { $( "#distance_input" ).val(ui.value); // Add / remove properties related to international if (ui.value > 250) { $( "#distance_input" ).val("International").addClass("international").prop('readonly', true); $( "#distance_slider .ui-slider-handle" ).addClass("international"); } else { $( "#distance_input" ).removeClass("international").prop('readonly', false); $( "#distance_slider .ui-slider-handle" ).removeClass("international"); } } }); // Custom script: if outside range, return to previous value (prevents text input above range) var initialValue = $("#distance_slider").slider("option", "value"); $( "#distance_input" ).val(initialValue); $( "#distance_input" ).change(function() { var oldVal = $("#distance_slider").slider("option", "value"); var newVal = $(this).val(); if (isNaN(newVal) || newVal < 10 || newVal > 250) { $( "#distance_input" ).val(oldVal); $( "#distance_input" ).removeClass("international").prop('readonly', false); $( "#distance_slider .ui-slider-handle" ).removeClass("international"); } else { $( "#distance_slider" ).slider("option", "value", newVal); } }); });
Attachments (0)
Change History (2)
Changed October 13, 2018 12:37PM UTC by comment:1
description: | In Chrome, the slider handle doesn't release every time. \ Description: \ - After sliding the handle (and/or clicking the range to move the slider handle) and releasing the mouse, the slider handle does not "release" from the horizontal mouse position. It follows the mouse even if the mouse is not clicked. \ - Sometimes double-clicking on body or document outside the .slider element releases the mouse, but not always \ - Sometimes focusing the mouse on another field or input releases it, but not always \ - Sometimes neither of these things works and the only solution is refreshing the page \ - Sometimes the bug doesn't occur until you've moved the slider value 2-3 times \ \ I have pasted my HTML and script below - it produces no console errors and I can't find a problem in it. Removing the custom elements of this script does not seem to prevent the error. \ \ <div class="slider"> <div id="distance_slider"></div> </div> \ <div class="text"> <input id="distance_input" class="form-control" type="tel" /> \ </div> \ \ $(function () { \ $("#distance_slider").slider({ \ min: 10, \ max: 260, \ step: 10, \ value: 50, \ range: "min", \ slide: function( event, ui ) { \ $( "#distance_input" ).val(ui.value); \ // Add / remove properties related to international \ if (ui.value > 250) { \ $( "#distance_input" ).val("International").addClass("international").prop('readonly', true); \ $( "#distance_slider .ui-slider-handle" ).addClass("international"); \ } else { \ $( "#distance_input" ).removeClass("international").prop('readonly', false); \ $( "#distance_slider .ui-slider-handle" ).removeClass("international"); \ } \ } \ }); \ \ // Custom script: if outside range, return to previous value (prevents text input above range) \ \ var initialValue = $("#distance_slider").slider("option", "value"); \ $( "#distance_input" ).val(initialValue); \ $( "#distance_input" ).change(function() { \ var oldVal = $("#distance_slider").slider("option", "value"); \ var newVal = $(this).val(); \ if (isNaN(newVal) || newVal < 10 || newVal > 250) { \ $( "#distance_input" ).val(oldVal); \ $( "#distance_input" ).removeClass("international").prop('readonly', false); \ $( "#distance_slider .ui-slider-handle" ).removeClass("international"); \ } else { \ $( "#distance_slider" ).slider("option", "value", newVal); \ } \ }); \ }); → In Chrome, the slider handle doesn't release every time. \ Description: \ \ - After sliding the handle (and/or clicking the range to move the slider handle) and releasing the mouse, the slider handle does not "release" from the horizontal mouse position. It follows the mouse even if the mouse is not clicked. \ - Sometimes double-clicking on body or document outside the .slider element releases the mouse, but not always \ - Sometimes focusing the mouse on another field or input releases it, but not always \ - Sometimes neither of these things works and the only solution is refreshing the page \ - Sometimes the bug doesn't occur until you've moved the slider value 2-3 times \ \ I have pasted my HTML and script below - it produces no console errors and I can't find a problem in it. Removing the custom elements of this script does not seem to prevent the error. \ \ {{{#!text/html \ <div class="slider"> \ <div id="distance_slider"></div> \ </div> \ <div class="text"> \ <input id="distance_input" class="form-control" type="tel" /> \ </div> \ }}} \ {{{#!js \ $(function () { \ $("#distance_slider").slider({ \ min: 10, \ max: 260, \ step: 10, \ value: 50, \ range: "min", \ slide: function( event, ui ) { \ $( "#distance_input" ).val(ui.value); \ // Add / remove properties related to international \ if (ui.value > 250) { \ $( "#distance_input" ).val("International").addClass("international").prop('readonly', true); \ $( "#distance_slider .ui-slider-handle" ).addClass("international"); \ } else { \ $( "#distance_input" ).removeClass("international").prop('readonly', false); \ $( "#distance_slider .ui-slider-handle" ).removeClass("international"); \ } \ } \ }); \ \ // Custom script: if outside range, return to previous value (prevents text input above range) \ \ var initialValue = $("#distance_slider").slider("option", "value"); \ $( "#distance_input" ).val(initialValue); \ $( "#distance_input" ).change(function() { \ var oldVal = $("#distance_slider").slider("option", "value"); \ var newVal = $(this).val(); \ if (isNaN(newVal) || newVal < 10 || newVal > 250) { \ $( "#distance_input" ).val(oldVal); \ $( "#distance_input" ).removeClass("international").prop('readonly', false); \ $( "#distance_slider .ui-slider-handle" ).removeClass("international"); \ } else { \ $( "#distance_slider" ).slider("option", "value", newVal); \ } \ }); \ }); \ }}} |
---|
Changed October 25, 2018 01:54PM UTC by comment:2
component: | ui.core → ui.slider |
---|