Question

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

我面临的问题是滑块的范围是0到24，并且根据要求，用户可以输入值＆gt; 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

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

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

Answer 2

如果您使用noUISlider的set函数根据值更新滑块（例如在输入字段中），它将对值应用一些检查并自动将它们设置为较低或者滑块的上限。它设置了滑块，但也（重新）设置了原始输入字段和“已校正”字样。值。

我已检出事件（https://refreshless.com/nouislider/events-callbacks），但update和set事件仅包含更正的值，因此也无法设置在这些事件发生后手动进行。

不幸的是，似乎无法达到你想要的效果。

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

2 个答案: