How to "push" range inputs?

[keithpickering]

Hi,

The plugin provides an option to disable "switching" the min and max handles, but now, attempting to drag one handle into another just makes both handles stop (as intended).

How can I change the behavior so that if you drag one handle into another, the other handle will be "pushed" so the difference between the two numbers is always 1 or higher?

[ValentinH]

Currently, there is no option for such a feature. But a PR would be cool!

[keithpickering]

Closest I got was checking and updating the values on the onChange event, but I couldn't get the previous value to determine which direction to push the other handle. Any ideas?

[ValentinH]

You can store the previous value on both onStart and onChange and compare with the latest one.

[keithpickering]

Hi, I tried your suggestion, and it almost works, but I'm unable to determine which direction the range is being dragged from (left or right). To do this I need to know which handle is being dragged during onChange, which makes this overlap with my other suggestion a bit. Any ideas?

[ValentinH]

I can add this to the parameters passed to the onChange callback. I'll do it when I get some free time for that or you can try to submit a PR if you need it quickly. It's probably not a big modification.

[keithpickering]

Hey, I managed to add this feature. I didn't submit a pull request because it's untested with a minimum range other than 1.

I just added a pushValues option, then replaced lines 1721-1761 with the following:

    if (this.tracking === 'rzSliderModel' && newValue > this.scope.rzSliderHigh) {
            if (this.options.noSwitching && this.scope.rzSliderHigh !== this.minValue) {
              newValue = this.applyMinRange(this.scope.rzSliderHigh);

              if (this.options.pushValues) {
                this.scope.rzSliderHigh += 1;
                this.positionTrackingBar(this.scope.rzSliderModel, this.scope.rzSliderHigh);
              }
            }
            else {
              this.scope[this.tracking] = this.scope.rzSliderHigh;
              this.updateHandles(this.tracking, this.maxH.rzsp);
              this.updateAriaAttributes();
              this.tracking = 'rzSliderHigh';
              this.minH.removeClass('rz-active');
              this.maxH.addClass('rz-active');
              if (this.options.keyboardSupport)
                this.focusElement(this.maxH);
            }
            valueChanged = true;
          } else if (this.tracking === 'rzSliderHigh' && newValue < this.scope.rzSliderModel) {
            if (this.options.noSwitching && this.scope.rzSliderModel !== this.maxValue) {
              newValue = this.applyMinRange(this.scope.rzSliderModel);

              if (this.options.pushValues) {
                this.scope.rzSliderModel -= 1;
                this.positionTrackingBar(this.scope.rzSliderModel, this.scope.rzSliderHigh);
              }
            }
            else {
              this.scope[this.tracking] = this.scope.rzSliderModel;
              this.updateHandles(this.tracking, this.minH.rzsp);
              this.updateAriaAttributes();
              this.tracking = 'rzSliderModel';
              this.maxH.removeClass('rz-active');
              this.minH.addClass('rz-active');
              if (this.options.keyboardSupport)
                this.focusElement(this.minH);
            }
            valueChanged = true;
    }

[ValentinH]

Could you still provide a PR so it's easier to review your changes? It's not a problem if it's not test, more commits can be added later ;)

[ValentinH]

@keithpickering What do you think about #341 ?

[ValentinH]

Implemented in 5.1.0 🎉