基础范围滑块不能施加限制

Question

我目前有一个屏幕，上面可以有多个范围滑块。每个滑块的总范围为 0 到滑块的最大组合可以有。例如start: 0; end: 20;

在我的应用程序中，我想为用户可以通过滑块 select 的值设置一些限制。因此，虽然滑块视觉范围为您提供了 0 - 20 的完整外观，但对于每个单独的滑块，用户只能 select 2 - 10 然后我稍后验证所有滑块的总和在可接受的范围内，最多为 20。

目前我有一些这样的代码似乎什么都不做

self.$qtyForm.on('change.fndtn.slider', '.range-slider', function (e) {
    var $rng = $(this),
        qty = parseInt($rng.data('slider'), 10);

    if (qty > maxChoiceQty) {
        $rng.foundation('slider', 'set_value', maxChoiceQty);
    }

    if (qty < minChoiceQty) {
        $rng.foundation('slider', 'set_value', minChoiceQty);
    }
});

我还注意到，只要我触摸滑块旋钮，更改事件就会触发。所以这实际上是在用户更改范围时触发 50 次这似乎不对。任何限制或使用其他事件的方法

Answer 1

jQuery 加载后在内部存储数据属性。替换此行：

qty = parseInt($rng.data('slider'), 10)

有了这个：

qty = $($rng).attr('data-slider')

你应该得到当前的滑块值。

基础范围滑块不能施加限制

Foundation Range Slider Cannot Impose Limits

javascript

jquery

slider

zurb-foundation