stopping the slider handle at a specific point

[dstone1983]

Our slider is linked to a database. The higher ups want no matter what a full year slider, but in some cases there won't be a full years worth of data. Is there a way to stop the slider at a specific date and prevent it from moving past that point?

So that gray range behind the slider means no data is in that range. So in essence I just want to stop the handle event from firing when it reaches a specific date.

Thanks!

[jdewind]

+1

[Mazrick]

Have you tried handling the ValuesChanged event, and checking if the min value is < your lower date/time limit, then set the min value to your lower limit?

Maybe something like the following code:

    $("#dateSlider").on("valuesChanged", function (e, data) {
             if (data.values.min < new Date ("1/1/13")) {
                  $("#dateSlider").dateRangeSlider("min", new Date ("1/1/13"));
             }
    });

[lukemcd]

The solution from Mazrick does stop the slider but produces the following error multiple times if you try to continue dragging past the min lower limit: TypeError: 'undefined' is not an object (evaluating 'this.cache.click.left')

It looks to be coming from this part of the code:

        _mouseDrag: function (t) {
            var e = t.pageX - this.cache.click.left;
            return e = this._constraintPosition(e + this.cache.initialOffset.left), this._applyPosition(e), this._triggerMouseEvent("sliderDrag"), !1
        },

Not immediately sure how to fix it.

[nicofrand]

The error thrown comes from jQRangeSliderDraggable, _mouseDrag method. If we just test that this.cache has the click and initialOffset properties, there is no more error.

_mouseDrag: function(event){
            if (!this.cache.click || !this.cache.initialOffset)
                return false;

            var position = event.pageX - this.cache.click.left;

            if (this.cache.initialOffset)
                position = this._constraintPosition(position + this.cache.initialOffset.left);
            else
                position = this._constraintPosition(position);

            this._applyPosition(position);

            this._triggerMouseEvent("sliderDrag");

            return false;
        },

Basically, it works (even if it flickrs since this is not the same thing than just cancelling the event, which is not possible) but then we hit another issue : https://github.com/ghusse/jQRangeSlider/issues/112.

[lukemcd]

Thanks nicofrand, that works to remove the error. I would be curious if there is a way to implement this and still maintain the mousedown state, so after the user hits the boundary they could move the range in the opposite direction without having to mousedown again.

[ghusse]

It seems to be a popular request, why not trying to propose a pull request adding this feature in standard slider ? It'all be far easier to tweak the code than trying to implement this on top of it.

[nicofrand]

NEW EDIT: I managed to make it work at init. NEW EDIT: it does updates the handles position. EDIT: here is a jsFiddle with a proof of concept : http://jsfiddle.net/vM844/347/. Please look at the end of the inline javascript to understand how it works.

This probably lacks of a lot things and might create bugs. Besides, this is still not really usable because of bug #112 (or at least, the same symptoms).

Anyway, if you know what should be added/modified in this code, please tell.

[nicofrand]

So, I finally managed to remove the bug where the bar kept decreasing when reaching the limits : http://jsfiddle.net/vM844/348/.

That does the work for me, but be aware that this still has some issues :

• the values set programmatically can still be greater than the limits
• probably others…

[ghusse]

That's a good start.

Don't hesitate to propose a pull request, because it'll be easier to comment on specific locations in the code.

I suggest you to modify the method _constraintPosition in jQRangeSliderBar.js, instead of modifying _mouseDrag on a parent. I you really need to modify this method, do it in the appropriate object instead of testing if _values exist. But I think _constraintPosition is the appropriate location.

For constraining handle values, you can modify the function _constraintValue in jQRangeSliderHandle.js. It's also the appropriate function for doing what you're doing.

[nicofrand]

This is already what I am doing for the handles (the issue came in fact from an error in my own code). However, for the slider bar, I found it more convenient since it would not trigger an useless "sliderDrag" event and that would also avoid the redraw (which would happen in the _applyPosition) if uneccessary.

However I tried this : http://pastebin.com/E6T8wseS for jQRangeSliderBar.js but this does not work properly, the range still decreases, even if only a little.

I'll try to pull a request once everything works as expected.

[ghusse]

Ok, I understand. In this case, consider overriding this method in the bar, instead of testing if you're in the good one. No need to add this specific code inside parent's code.

As I wrote, a push request allows me to write comments in the code. Even if it's not finished yet, it's easier to send feedback.

The problem I found with your demo is that grabbing an handle makes it bouncing when hitting the limit.

[nicofrand]

Ok, this is done and updated (http://jsfiddle.net/vM844/352/). I will try to push a request this afternoon. I only tested it with Firefox so far (with which everything is fine), and just tested with Chrome, you're right it bounces :/.

[dstone1983]

Been awhile since i checked in here. Thanks so much for looking more into this and I look forward to the completed form of this functionality.

[achudars]

Has this been done?

[ghusse]

No

On Thu, Nov 14, 2013 at 3:12 PM, Aleks [email protected] wrote:

Has this been done?

— Reply to this email directly or view it on GitHubhttps://github.com/ghusse/jQRangeSlider/issues/85#issuecomment-28486376 .

[uberspeck]

Wondering if https://github.com/ghusse/jQRangeSlider/issues/194 is related to this? If so, seems a fix isn't coming soon? :(