Dual Range Slider

advanced-prototyping
#1

Hi,

I’m trying to create a dual range slider. I’m trying to simulate two main actions:

  1. Make the bar fill purple inbetween the area of the sliders as the user drags a slider left and right. I have this partially working but can’t figure out how to make the left fill show on the right side of the left slider. The right slider seems to be working correctly.

  2. Move the min and max numbers in the fields above the slider incrementally up or down according to where the user drags the slider. This would be a nice to have, but not need to have. #1 is need to have.

  3. This would be extreme extra credit: Have the slider move and show the range selection if the user enters a number directly into the min or max fields.

Again, #1 is really most important. The other two are nice to haves. File attached.

Thanks for any help.

-Tom
Dual_Range_Slider.rp (74.3 KB)

#2

Hi Tom -

I didn’t do the extra credit, but here’s it is overall. This uses Math.min and Math.max to limit the range of the sliders. In Axure 8 beta, you can put range limits as a qualifier to Drag, apparently, so it might be easier in it.

Live sample.

File: Dual_Range_Slider.rp (76.2 KB)

#3

Wow! Beautiful Joe, thx!

-Tom

#4

Hi All,

I worked on a dual range slider separately from the exercise described at the start of the thread. Thought I’d share it here. It is built purely in 7.0. Enjoy!

light_forger
light_forger - 7.0 Calendar-like Drag.rp (90.2 KB)

#5

Hi

I’m looking for advice on how to adjust the dual range slider so that it moves vertically instead of horizontally. I cannot seem to figure it out from looking at the variables for the elements. Any feedback would be much appreciated!

Thanks,

#6

Can anyone please lend me some advice

#7

Hi!

Here’s a vertical version. Note that the scripts are vastly simplified now that the Move command has boundaries. Also, there’s a global variable called sliderMaxValue, here set to 100. Set its default value under the menu Project > Global Variables.

To change the height of the slider, just change the height of the dynamic panel “sliderPanel.” Important: make sure that sliderPanel is NOT set to fit-to-content.

Live sample

File: Dual_Range_Slider_vertical.rp (74.8 KB)

#8

Hey thank you. Yes I noticed the previous horizontal one was set to “fit to” the purple bar. I’ll go in and see how you made this vertical since with code it would not respond successfully to the rotate.

Thanks again!

#9

Is there a way to allow the user to enter their own value in the fields and adjust the slider to that value when it’s entered.

Thanks for any help.
Andy

#10

Hey is there a way to change the Math.min in 18? I would like to make an Age Slider from 18 to 90 years. I cant figure out how to change the “0” to “18”. And I have no clue how to make my own slider. I created the exact same objects and added the same properties but it won’t work. Can anyone please help me?

Untitled7.rp (4.69 MB)

Thanks in advance
Michelle

#11

Hi!

Since the total span between 18 and 90 is 72, and since it starts at 18, change both of the text expressions to this:

[[ 18+ ((rightSlider.left - sliderBack.left)/sliderBack.width * 72).toFixed(0)]]

#12

Hi Again!

I created this dual-range slider in the Axure 7 days, back when you couldn’t specify drag boundaries (thus all of the Math.max/Math.min stuff), along with other things that didn’t exist back then that now make this much easier.

I widgetized this slider so it should be easier to reuse. To style it, update the contents of the dynamic panels. To set the minimum and max values of the range, open the _vars panel and set the values appropriately:


The pink panel (which you may or may not want to show) specifies the width of the slider.

Live sample

File: dual-range-slider.rp (70 KB)

#13

Thank you a lot, but I still couldnt get it to work. I tried something else, but something is wrong there too. Can someone help me? I tried to add a pink bar that changes it size dynamically with the pointers. The right pointer doesn’t work anymore either.

I hope anyone can help me.

Thankyou

Filter.rp (1.99 MB)

Anyone? Please?

#14

Hi Mhaus,

In your file it looks like the pink bar is resizing as the left handle drags, but is resizing from the wrong anchor point; rather than having the left handle’s Set Size action use “anchor top left”, have it use “anchor top right” so that the right edge of the pink bar stays stuck to the right handle, while the left edge adjusts as the left handle gets dragged. For the right handle you’ll want to do the opposite and have the Set Size action for the pink bar anchor to top left.

As far as why the right handle wasn’t resizing the pink bar, it looks like the Set Size action on the right handle had a formula set up, but there were no local variables defined to tell the prototype what subtracting “[[rightpointer.left - leftpointer.right]]” was supposed to do. If you add your local variables that define the pointers as the right and left pointer panels, then this should fix that interaction:

00001945.png740×572 46.2 KB

To fix the little gap that seems to appear between the handles and the edge of the pink bar, you can add half of the handle’s width to your Set Size formula, inside of the brackets (e.g. “[[rightpointer.left - leftpointer.right+17.5]]” to fill in that space.

Hope that helps!

Hopefully that helps!

#15

if amnyone could help me build this i would be over the moon!

#16

This Dual slider is excellent, thanks so much posting. I realise this was posted a while ago but I was wondering if it could be made to latch, step, snap to a set increment between the high and low values?
Thanks again P

#17

Hi handdrawnpaul,

You should be able to do this with the “If area of [widget] is over” conditional logic and the “Move to” interaction. This should allow you to “snap” the handles to specific increments, depending on its position on the slider. Feel free to post your RP file here if you’d like some more targeted assistance!

#18

Can you update the slider to the latest version? Please :grin:

#19

Hi josephxbrick,
I am really like your slider and I am trying to adopt it to Dual range slider for Age range from 0-90.
The right handle is moving perfectly. But left… is shifting the graph.

Preview
slider.rp (263.0 KB)
If you could please help me to resolve this issues, I would greatly appreciate it!
Natalie

#20

Hi Natalie!

Add the following code to the dynamic panel that contains the group that represents the graph. (Let’s assume the graph group is called “graph”)

OnResize
   Move graph to [[ -This.x + 20]] , 0

(The 20 is the starting x value for the dynamic panel containing the graph.)

[Edit] Oops! I forgot to tell you which message to handle on the dynamic panel containing the graph. I updated the code above