Skip to main content

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 rjollos 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 scottgonzalez comment:2

component: ui.coreui.slider