Format one 'side' of a slider with a different color

Aug 09, 2017


I am looking of a way to format one side of a slider with a different (darker) colour than the other side and so visually accentuate the difference. See the attachment for an example. I would like to use the slider as an indicator of how far the student is in the course. So one end is 0% and the other end indicates 100%. Eacht slide the thumb moves a bit more from left to right.

Is it possible to somehow format the slider in such a way that one side (from one end to the thumb) looks a bit more dark then the other side (thumb to other end)? Or is it possible to create the effect other than with a slider?

Any help is greatly appreciated.

Kind regards,


7 Replies
Rob Willemse

Thank you very much for the tip Phil, I did not think of the option to use gradiants. So I immediately tried the different gradient options in a slider but do not seem to be able to set the thumb as a stop position. The position where one colour changes in another is more or less fixed in a percentage. Do you perhaps know how I can apply the gradient in such a way that it is ‘dynamic’ in the sense that it adjusts according to the position of the thumb?

Regarding the state of the object below I do not know how you compensate for the fact the the thumb can change in one course with steps of 1% (in a course 1ith 100 slides) or 10% in a course with 10 slides.   

Thank you for the effort! 

Rob Willemse

Thanks Phil!

This could work. I was thinking to make one end of the slider 1 and the other the number of slides so that with each slide the slider moves up one spot. But I can also make one side 0% and the other 100% and calculate the percentage passed. Then I could correlate the percentage with one of 100 states. It is quite a task but I will do this in a master slide and then use this for our projects.

Thank you again!

This discussion is closed. You can start a new discussion or contact Articulate Support.