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

我正在使用绑定输入的范围滑块

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

我大部分时间都能通过代码做到这一点：

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

$（“#slideInput”）。在（'blur keyup'，function（）上{
如果（$（this.val（）>40 | |$（this.val（）<4）{
警报（“您已达到限制”）；
}
});

代码笔演示：

---

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

---

非常感谢您的建议。

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

话虽如此，我还是在检查输入有效性之前禁用了滑块，然后重新启用并重新加载滑块

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

代码笔演示：

$("#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');
     }

});