1

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

                });
4

2 回答 2

1

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

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');
                    }
                });
于 2015-10-21T21:20:44.903 回答
0

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

我已经检查了该事件（https://refreshless.com/nouislider/events-callbacks），但updateandset事件仅包含更正的值，因此在这些事件触发后也无法手动设置它。

不幸的是，似乎无法实现您想要的。

于 2015-10-21T20:42:50.383 回答