Slider handle "sticks" to mouse and does not release

[Russell Jones]

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