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.
File: Dual_Range_Slider_vertical.rp (74.8 KB)
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!
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
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
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)]]
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.
File: dual-range-slider.rp (70 KB)
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?
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:
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!
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
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!
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
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
Hi josephxbrick,
Wow! Thank you so much! It works!
Now I understand the issue.
Preview
slider.rp (265.3 KB)
Many thanks again!
Natalie
Your purple bar doesn’t move past the right slider. When I recreated this, the bar is moving past the right slider. Is there a way to fix that?
Hi!
There is a hidden dynamic panel called “_vars” on the page that lets you configure that:
[Edit] Oh, you are using a different one than mine, which I haven’t looked at. Mine is here and it lets you adjust it.
Slider.rp (62.4 KB)
@josephxbrick Owh i already built one myself. I just have one question: how can you make it that the gray bar in this file gets a lighter color when you move the wyber (ondragX)