Forum Discussion
Is there a way that I can have a text box that moves with the Slider Thumb?
I have a slider that shows percentage of success we have had.
The design asked for is that the value of the slider (from 1 to 100) should always display on top of the slider as it moves along the scale.
Is there any way that i can attach a text box (showing the slider variable value) to the slider thumb?
14 Replies
Hi Jay, check out this post and answer/example from Michael Hinze:
Hey Richard!
Thank you for the pointer!
But what I need is for a text box containing the slider variable to MOVE ALONG WITH THE SLIDER THUMB, so the users see what percentage the slider thumb indicates.
The challenge i have is to make the text box move with the slider thumb.
I tried to use Motion paths but I dont think you can set motion paths to move/stop according to anything..they just do their thing and then stop.
Anyone got any ideas for me?
Here is a slide with my challenge
I suppose you could create 100 different states of the text box and tie each state to a variable value.
Also, I know it's not what you were asking about, but reading red text on a blue background is going to be difficult to any users with eyesight issues, especially with such a small font. I recommend a much higher contrast for the percentage text.
Haha! Yes Daniel, I turned it red so I could refer to it easily here :-)
I guess I'll have to keep the text box stable in that case because a 100 states...a bit much :-)
But thank you for your reply! I appreciate it a lot!
Hi Jay,
The text box as you showed can't be grouped with the slider icon - so I think you'll need to follow Daniel's suggestion - although that'll be a lot of states/triggers. Hopefully if someone has done something similar they'll be able to share it here with you. You may also want to look at some of the slider examples in the E-Learning Challenges to see if there is anything in there that would suit your needs.
Hmmm I thougth so. Oh well. Thank you for the link Ashley! I'll take a look. :-)
Hi Jay,
Alternatively, you can have the numbers from 0 to 100 (in intervals) below or above the slider and it shows the user where exactly he/she is (approximately).
Please check the SL2 file which I edited it to show what I was saying.
Srinivas has a pretty good option for you there. I played with it a bit more and added a frame around the variable text box, right aligned it so the digit columns don't move, and added a % symbol in a separate text box. I think the overall effect is one that looks very professional.
It looks cool Daniel :)
Thank you Daniel! The numbers are a good idea, and you've put me on the right path regarding how I can display the percentage. :-)
