How To Set Different Margins And Limits For Connected Ranges

I'm using NoUiSlider and my main use case is to have multiple ranges that can act independently.

For example, 2 ranges representing 2 yearly ranges:

• one range of 2002 (Start of 2002 to end of 2002)
• one range of start of 2007 to end of 2010.

Also, both ranges can be moved on the axis to change the years covered and the range size can be changed to include more or less years as well.

This works fine.

However, I do have some constraints. For example, the user can't create a range that is larger or smaller than a certain size. NoUiSlider does have options that control this: Margin and Limit. These do enforce the restrictions but they act globally for all handles (in all ranges).

I really only care about enforcing the rules among connected handles in a single range.

In this fiddle: https://jsfiddle.net/hbL4v0ce/ you can see the behavior.

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
  start: [2002, 2003, 2008, 2012],
  step: 1,
  connect: [false, true, false, true, false],
  margin: 0,
  limit: 4,
  behaviour: 'drag',
  range: {
    'min': 2000,
    'max': 2016
  },
  pips: {
    mode: 'steps',
    density: -1
  },
});

The right range can't be moved any more to the right because one of the handles is already at the configured 4 unit limit away from the left range and similarly the left range can't be moved any more to the left. This is not the behavior that I want.

If I could specify separate limits/margins for each connected range I think that would solve my problem. Is it possible to do this? Or is there another approach that would achieve my goals?

noUiSlider doesn't have a feature to use different margins/limits for different handles. You have multiple options:

• Abstract the years away from the slider, and map the slider values to years in a formatter. For example, you could have your slider run from 0 - 100, then map the values for the last two handles to 2007 - 2010. You could then enforce any constraints you have in the update event. This might look/work better if you disable the step option, and implement "soft limits" instead.

• Alternatively, you could disable the margin option, and implement your margin behavior yourself using the set method in the update event. There's a pretty good example of how to do this in this Github issue.