Handle large ranges better

[twistedvisions]

I'd love to be able to use this as a range selector which selects the range of years for which to show events on a map, see here. I would also like to put the date selected in each handle, so the user understands that these sliders control the date.

Even though it has a 4000 value range, I'd like it to start initially around the present, the last 50 years, so from 1963-2014

I have implemented this with jQRangeSlider, and here is a fiddle that (kind of) shows the issue http://fiddle.jshell.net/tVC2G/

The main issue is that the wide sliders overlap. It would be good if you could have a mode where the value of the min slider was on the right side of the handle and the value of the max slider was on the left side of the slider. In this way, you could easily deal with such large dates.

I realise this is probably not something you would plan to do and may be unique to me, but I've played with 4 range sliders tonight and this seems the best (by miles!) so far, so I'd love to have a hack at it and try to get it to work.

I'd appreciate any pointers to where in the code you think it's best I changed, otherwise, I'll have a dig myself in the near future.

Well done on making such an awesome widget!

[ghusse]

Hello,

I will not have access to a computer until next week. I'll do my best as soon as I can.

[ghusse]

Ok, I understand your issue.

How the slider calculates its values had been changed recently because right and left handles did not behave consistently regarding the optional scale ticks.

That's why the slider do not behave this way anymore. Now, I understand your need, and I'll think about reintroducing this behavior.

Can you check if you can do what you want with jQRangeSlider 5.4?

[twistedvisions]

@ghusse thanks for the tip. The behaviour is better in 5.4, but not totally as I'd like. I can probably work around it with 5.4 though.

I've made a video of the functionality in 5.6. At 10 secs I'd like the range to be 394BCE - 394BCE, not 394BCE to 124CE, since this means that to have a 10 year gap there is a lot of overlap between the sliders. I may be able to get around that with mathematical trickery. Would it be possible to build it into the library itself though?

You can also see the sliders jump at 19 seconds. If I use 5.4 this does not happen, so I'll try using this until you resolve the issue.

Thanks!

[twistedvisions]

I just had a go at putting the dates in the boxes themselves using my own calculations. Here is a video.

The problem with this approach is the period while the boxes are both on top of each other. In particular:

• as you move the left slider, the right one changes it's value.
• the one not moving has it's value changed when you get to the other side.

It wouldn't be such an issue if I didn't show the values on the sliders themselves, but I need to because otherwise people don't realise that you can navigate the date range in the UI, and I'm trying to be as unobtrusive with that part of the UI as I can.

Any suggestions?

Here is my code for future reference:

      var bar = this.$(".ui-rangeSlider-innerBar");
      var left = this.$(".ui-rangeSlider-leftHandle");
      var right = this.$(".ui-rangeSlider-rightHandle");

      var breadth = bar.width() - (left.width() + right.width());
      var leftPos = parseInt(left.css("left"), 10);
      var rightPos = parseInt(right.css("left"), 10);
      var range = this.bounds.max - this.bounds.min;
      var leftVal = (leftPos / breadth) * range + this.bounds.min;
      var rightVal = ((rightPos - left.width()) / breadth) * range + this.bounds.min;

      var min = Math.min(leftVal, rightVal);
      var max = Math.max(leftVal, rightVal);

      return [Math.round(Math.min(this.bounds.max, Math.max(this.bounds.min, min))),
              Math.round(Math.min(this.bounds.max, Math.max(this.bounds.min, max)))];

[twistedvisions]

Just noticed its a bit hard to see the dates on the sliders in the video at the default quality, change it to 480p and its a bit better!

[ghusse]

Hello,

I understand your problem but I'm not sure to have a solution for you.

On Thu, Feb 20, 2014 at 11:06 PM, twistedvisions [email protected]:

Just noticed its a bit hard to see the dates on the sliders in the video at the default quality, change it to 480p and its a bit better!

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

[twistedvisions]

I was having a think over it last night and I think the solution might be to change the position of the non-dragged slider to the other side as soon as the one being dragged side crosses it. I'll let you know how it looks when its done.

[ghusse]

Or you can forbid overlap between the two handles.

On Fri, Feb 21, 2014 at 9:02 AM, twistedvisions [email protected]:

I was having a think over it last night and I think the solution might be to change the position of the non-dragged slider to the other side as soon as the one being dragged side crosses it. I'll let you know how it looks when its done.

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

[twistedvisions]

That too - is there an option for that?

[ghusse]

Nope, not in this version. But it might not be that difficult.

On Fri, Feb 21, 2014 at 9:06 AM, twistedvisions [email protected]:

That too - is there an option for that?

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