Foundation Range Slider Cannot Impose Limits

Question

I currently have a screen that can have multiple range sliders on it. Each slider has a total range of 0 to the maximum the combination of sliders can have. For example start: 0; end: 20; start: 0; end: 20;

Within my application I would like to set some limits for the values a user can select via the sliders. So while the slider visual range gives you the full appearance of 0 - 20 for each individual slider the user can only select 2 - 10 and then I later validate that the total sum of all the sliders is within an acceptable range up to 20.

currently I have some code like this which seems to do nothing

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

I also noticed that as soon as I touch the slider knob the change event fires. So this is actually firing like 50 times while the user is changing the range that doesn't seem right. any way to limit that or use another event

Answer 1

jQuery stores data- attributes internally once loaded. Replace this line:

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

with this:

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

and you should get the current slider value.