Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Custom ProgressBar using a Slider

Well this isn't a question, but a solution for past and possible future question on the subject.

A few weeks ago, searching for a way to customize at least the colors of a ProgressBar in iOS, my ticket sent me to tenderapp discussions.

I was a little sad with that as you can imagine. But with my endless intelligence (right..) I've come up with a way of archiving just what I needed for a music player progress bar. Here's the part of the code that matters:

    var progress = Ti.UI.createView({
        width: 220,
        height: 'auto',
        backgroundColor: 'transparent',
        bottom: 5
    var progress_bar = Ti.UI.createSlider({
        min: 0,
        value: 0,
        thumbImage:'../images/empty_thumb.png' // just to "hide" it

After adding you "progress" to wherever you want, you control the values using "progress_bar" (just in case it didn't make sense before :p)

— asked October 11th 2010 by Marco Ferreira
  • custom
  • iphone
  • progressbar
  • slider
  • nice hack :D

    — commented October 11th 2010 by Juan Felipe Alvarez Saldarriaga
  • How does this let you customize the progress bar colors? Sliders don't seem to have a color option either.

    — commented May 2nd 2012 by Roman Chang
  • I have the same question, how to customize the slider bar color?

    — commented November 18th 2012 by hengdi zhang
  • you can change slider bar colors by changing rightTrackImage and leftTrackImage.

    — commented January 21st 2013 by Tanel Teemusk

1 Answer

  • great idea

    — answered July 8th 2011 by Alberto Marcone
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.