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

【问题标题】：Foundation Range Slider with Input Alert?带有输入警报的基础范围滑块？
【发布时间】：2020-10-26 22:26:13
【问题描述】：

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

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

我大部分时间都可以用代码做到这一点：

$("#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

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

非常感谢任何建议。

【问题讨论】：

标签： jquery input slider zurb-foundation alert

【解决方案1】：

所以我发现绑定到输入的范围滑块在触发条件警报之前正在重置最小值/最大值。

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

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

$("#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

【讨论】：