带有输入警报的基础范围滑块？

Question

我正在使用带有绑定输入的基础范围滑块。

我想在“如果”用户在输入中键入的数值大于滑块的最大值或小于滑块的最小范围时触发警报。

我可以使用以下代码完成大部分工作：

$("#slideInput").on('blur keyup', function() {
    if ($(this).val() > 40 || $(this).val() < 4) {
            alert('you have reached a limit');
     }
});

CODEPEN 演示： https://codepen.io/jinch/pen/JjKWxOQ?editors=0010

但是，我希望仅当输入字段模糊或按下回车键时才触发警报。我试图通过在字段中键入内容来避免弹出警报。

非常感谢任何建议。

Answer 1

所以我发现绑定到输入的范围滑块正在重置 min/max 值，然后我才能触发条件警报。

话虽如此，我通过在检查输入有效性之前禁用滑块来解决它，然后 re-enabling 并重排滑块。

可能有更直接的方法，但如果其他人需要解决方案，这似乎可行。

$("#slideInput1").on('blur keyup', function(e) {
    
    // disable the slider
    $(".slider").addClass('disabled');

    // keep slider opacity at 100%
    $(".slider").css('opacity', '1.0');

    // condition to track if blur or enter key when inside the input
    if (e.type === 'blur' || e.keyCode === 13) {

        // check the validity of min/max and alert if invalid
        if (!(this).checkValidity()) { 
          alert('you have reached a limit of input #1');
        }

        // remove disabled from a slider
        $(".slider").removeClass('disabled');

        // reflow slider to reset it
        $('.slider').foundation('_reflow');
     }

});

CODEPEN 演示： https://codepen.io/jinch/pen/oNLEKpR?editors=1010

带有输入警报的基础范围滑块？

Foundation Range Slider with Input Alert?

jquery

input

slider

zurb-foundation

alert