noUiSlider

Question

我在 Angular 应用程序中使用 noUislider。滑块的值绑定到输入文本，反之亦然。因此，用户可以选择输入值，滑块将相应调整，或者用户可以滑动滑块。

我面临的问题是滑块的范围是 0 - 24，根据要求，用户可以输入大于 24 的值（这是滑块上的最大值）。期望滑块将移动到最大值但保持用户在输入文本中输入的值（即 26）

我什至不确定这是否可能。非常感谢这方面的任何帮助。

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

如果您使用 noUISlider 的 set 函数根据值更新滑块（例如在输入字段中），它将对值应用一些检查并自动将它们设置为下限或上限你的滑块。它设置滑块，但也（重新）设置具有 'corrected' 值的原始输入字段。

我已经检查了事件 (https://refreshless.com/nouislider/events-callbacks)，但是 update 和 set 事件只包含更正后的值，所以在这些之后也没有手动设置的选项事件火了。

很遗憾，好像不能达到你想要的效果

Answer 2

我在上面找到了 Frank post 问题的解决方案。我确实有一个编写的自定义实现，但它确实有效，下面是我所做的

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

noUiSlider - 有一个最小值但允许用户输入低于最小值的值

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

jquery

angularjs