Opened 5 years ago

Last modified 5 years ago

#15315 new bug

Slider handle "sticks" to mouse and does not release

Reported by: Russell Jones Owned by:
Priority: minor Milestone: none
Component: ui.slider Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Ryan J Ollos)

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);
            }
        });
    });

Change History (2)

comment:1 Changed 5 years ago by Ryan J Ollos

Description: modified (diff)

comment:2 Changed 5 years ago by Scott González

Component: ui.coreui.slider
Note: See TracTickets for help on using tickets.