noUiSlider - Have a min value but allow user to enter value lower than the min

Question

I am using noUislider in an Angular app. The value of the slider is binded to an input text and vice a versa. So the user has an option either to enter values and the slider will adjust accordingly or the user can slide the slider.

The issue I am facing is that the slider has a range from 0 - 24, and as per the requirement the user can enter values > 24 (which is the max on the slider). The expectation is that the slider will move to the max value but hold the value which was enter by the user in the input text (ie 26)

I am not even sure if that is possible. Any help in this regard is much appreciated.

noUiSlider.create(element, {
                    start: ngModelCtrl.$modelValue || setupParams.defaultValue,
                    step: steps,
                    range: {
                        'min': min,
                        '50%': [average, steps],
                        'max': max
                    },
                    pips: {
                        mode: 'count',
                        values: 3,
                        density: 5,
                    },

                });

Answer 1

I found the resolution for the issue with Frank's post above. I did had a write custom implementation but it does work, below is what I did

element.noUiSlider.on('slide', function (value, handle) {
                    inputVal = null;
                });

                element.noUiSlider.on('update', function (value, handle) {
                    if (inputVal == null) {
                        ngModelCtrl.$setViewValue(parseFloat(value), 'test');
                    }

                    if ((inputVal > min) && (inputVal < max)) {
                        ngModelCtrl.$setViewValue(parseFloat(value), 'test');
                    }
                });