CODEWITHSUNDEEP
jqueryangularjsnouislider
codingpirate
codingpirate

Reputation: 1414

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

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,
                    },

                });

Upvotes: 1

Views: 1025

Answers (2)

codingpirate
codingpirate

Reputation: 1414

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');
                    }
                });

Upvotes: 1

sourcx
sourcx

Reputation: 974

If you are using noUISlider's set function to update the slider based on a value (e.g. in an input field), it will apply some checks to the values and automatically set them to the lower or upper bound of your slider. It sets the slider, but also (re)sets the original input field with the 'corrected' value.

I've checked out the event (https://refreshless.com/nouislider/events-callbacks) but the update and set events only contain the corrected values, so there's also no option to set it manually after these events fire.

Unfortunately, it seems that it is not possible to achieve what you want.

Upvotes: 0

Related Questions