Foundation Range Slider with Input Alert?

Question

I'm using foundations range slider with a bound input.

I would like to trigger an alert "if" a user keys in a number value in the input that is greater than the maximum or less than the minimum range of the slider.

I was able to do this for the most part with the code:

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

CODEPEN DEMO: https://codepen.io/jinch/pen/JjKWxOQ?editors=0010

---

However, I would like this to trigger the alert only when the input field is blured OR when the enter key is hit. I am trying to avoid the alert from popping up simply by typing in the field.

Any suggestions are greatly appreciated.

Answer 1

So I figured out the range slider bound to input was resetting the min/max values before I could trigger the conditional alert.

With that said, I worked around it by disabling the slider before checking the input validity and then re-enabling & reflowing the slider.

There may be a more straightforward approach, but this seems to work if anyone else needs a solution.

$("#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 DEMO: https://codepen.io/jinch/pen/oNLEKpR?editors=1010