Functional Slider

[mcsper]

Hi,
No question, I just made something that others will be able to use without figuring it out themselves like I had to. I was searching for a while and found nothing exactly like what I wanted (and most of it was pretty old).
I made a slider that displays where it is between 0 and 100 using only one hotspot (instead of one for each gradation) and the cursor coords. I made it so that it works wherever it is placed on the page (if it’s inside another Dynamic Panel, you have to adjust the variables a little).

If you have any questions I will try to answer them.

scroll_widget.rplib (56.7 KB)

EDIT: I didn’t see the Axure Resources section till after and I cant figure out how to move it. sorry

[dkaragiannis]

Hello,

i´m trying to do a similar slider that starts from 50 up to 300 in each 10 steps. (50,60,70…)
Unfortunately i have no clue about variables and stuck at this point, can you give me assistance about this issue?

Thank you!

[mcsper]

Hi,
Some of this might be a little complicated or beyond me but I will try to help.

To make the bar go from 50 to 300 wasn’t that complicated, all that you need to do is change the formula on the sliderBtn Dynamic panel that says “set text on sliderLabel…” to [[(((Cursor.x-sliderDP.x)/slider.width).toFixed(2)*250)+50]]. the 250 is the number of steps now, and the +50 is your starting point.

Do you want the slider to jump to the closest multiple of ten when you drop it?
I don’t think the Math.round() function works in axure to display the numbers. The way that I have gotten the slider to jump to the closest 10 is time consuming with an if/else for each different step.
you might be able to do it with individual hotspots too, like a lot of the older styles. I think this is the easiest solution for you, just a lot of repetitive editing. try it out. scroll_widget-2.rplib (58.9 KB)

You might want to post this as a question again for more visibility and a better solution, and you can link to this post to help inform people.

[dkaragiannis]

Hi,

thank you so much for your answer and valuable information!!
I will check your Axure file and will try to understand it, i hope to have something to share soon.

What do you think will be a good name for a new post? Touch friendly slider with hotspots?

Thank you,
Dimitrios

[mcsper]

You’re welcome. I hope it helps some.
Something like that name or “touch friendly slider with per-defined positions”. Hopefully someone else will be able to help you more.

[aruffo3]

Great work on this!

I had been trying to figure something like this out.

One question, there are certain points along the path where it doesn’t seem to round the numbers down (ex: 14.000000000000002, 28.000000000000004). I’m using RP8, so I don’t know if that is an issue or not since it was done in RP7. I didn’t think it would be, but you never know.

What would be the cause for this and how would you solve that issue?

[Alyssa_Axure]

Hi! It looks like you’re referring to the file in the first post. To fix the couple of instances where the reported slider value has many decimal points, you can move the “to.Fixed(2)” portion of the Set Text formula to the end of the equation, like this:

That should allow the calculations to complete and cut off all decimals after the new value is determined. Hopefully that helps!

[mcsper]

Thanks. It was a lot of thinking but really useful.
I had noticed that weird glitch too and like alyssa said, with the .tofixed() at the end it should work better.
I will try to upload a fixed version

[mcsper]

scroll_widget.rplib (59.2 KB)

This is an updated version that should work without the glitch above. (I couldn’t edit my original post)

[lepuga]

Hello. Thanks for this solution. I truly appreciate it.

I am wondering if you have any suggestion on how to make the slider operate between two values. Essentially, I’d like it to start at a value (250) and have a max of 623 and a min of 101. I figured out how to set the max, but I couldn’t figure out how to not get the min value drop to 0.

[mcsper]

Hi Lepuga,

I’m very glad. Just looking at this really quickly I figured out how to make the minimum number whatever. If you look at this picture you can see that I added one more open-parenthesis to the front and the +101) to the end.
Right now I can’t see how to change the max number (I made this a while ago). I would love to see how you did it.

good luck

[lepuga]

Hey mcsper, So I think I spoke to soon. It wasn’t that I figured out a way to manipulate the equation. On second glance, I just was lucky in that the length of my hotspot was near the upper end of the value I wanted the slider to be. I did upload a photo to what I have the formula set to. As you can see, by changing your 100 to 663, I have increased the range of numbers. But it is not a hard maximum.

[Anthony_Axure]

[Anthony_Axure]