Long time lurker, you all are awesome. I’m not a developer, and have been challenged with making some pretty complex prototypes in Axure.
I’ve been challenged with creating dual sliders, but also need the sliders to display dynamic words or letters according to the slider position with an activated/deactivated look to the words.
Any thoughts or help on completing this would be most appreciated.
Cheers,
Ben
It’s possible to accomplish what you’re looking for; it’s just tedious and brittle:
DualSliders.rp (85.4 KB)
Most of the functionality you’re wanting can be achieved with a dynamic panel’s “Dragged”/“Drag Dropped” interactions and the “widget is over” condition. The rest is a lot of math for positioning and sizing things the way you want.
The “numerical range” slider isn’t too difficult to get working, just set the thumb’s “Dragged” trigger to change the text to [[textboxValue + DragX]]. Your bigger problem is going to be with scaling the values; you’ll hit the end of the line way before you get a value even remotely close to what it “looks like” it should be.
With the discreet value slider, each value is its own widget that the track overlaps. As the thumb moves, you check to see which value it’s over and then set its widget to active.
That’s the high-level overview anyway. Hopefully the project file will make things more clear.
Thank you!!! You are amazing.
This is a fantastic start for what I need to do!
Cheers!
I got the text sliders working - Huban, you are a lifesaver.
IS there a way to take text input and reverse-engineer it to adjust min and maximum sliders according to numeric values entered? With decimal places, and with and without commas?
Users need to be able to enter a ver specific value like 1.23 carats, and also minimum / maximum price ranges.
I
Thanks again!
…yeah. I was afraid you might want to do that.
The good news is your currency formatting is already covered: Currency Formatting!
You can do it, but it’s going to be a pain-in-the-ass, especially since you have really broad ranges. Basically the problem you’re facing is that the entered values have to correspond, in some way, to the x position of the thumbs. An easy way to look at it is if the min and max values represented pixels: enter a value of 50 and the thumb moves to [[Track.x + 50]], drag the thumb and the value changes to [[Thumb.x - Track.x]].
So you would stop using [[DragX]] for any of your values and use the thumb’s x positions instead. So “pixel 1” would equal “200”, “pixel 600” would be “5000000” and “pixel 300” would be “2499900” ((5000000 - 200)/2), etc. Here’s an example of how you might do it: Changing position of slider from text input
Honestly, if I absolutely had to implement something like this, I’d just code “hard stops” for specific ranges of values. “Any value between 1,000 and 5,000, move the thumb to position A”, any value between 10,000 and 50,000, move thumb to position B", etc.
That’s how I’d do it anyway; I’m positive there are lot’s of people out there that are much better at planer math than I. 
Stumbled across this as I was cleaning up a bunch of old Axure files from my computer:
Dual_Range_Slider.rp (76.2 KB)
I’d like to clearly state this is not my solution. They are obviously better at planar math…
(If anyone does know whose it is, please let me know and I will give them credit.)
