Is there a way that I can have a text box that moves with the Slider Thumb?

Nov 17, 2015

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
Jay Dharap

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?

Ashley Terwilliger-Pollard

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. 

Daniel Mitchell

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.

Modassar Warsi

Late Post!

Ideally, I would still go with Daniel's first option because although 100 states look challenging at the face value. However, the ease with which you can duplicate the triggers and just change the state and variable value that it should be done in 10 min. Maybe another 10 min to adjust the textbox in all states. :P