Using slider as progress bar in Titanium

Introduction :

Progress bar generally used to display amount of work done on background, for example it can be displayed to show percentage of work done while uploading or downloading any content. Titanium has Slider API which can be used to do the same for cross-platform applications.

Description :

Let me create a scenario where we will have a slider and a button on window. On click of that button, slider will start sliding which will appear as progress bar on the screen.

//Define current window
var currentWin = Ti.UI.currentWindow;

//Define a button to start the progress
var startBtn = Ti.UI.createButton({
      width    : 200,
      height   : 50,
      title    : 'Start Progress...',
      top      : 300

//Button added to window

On above code block a window gets defined with a button added on it.

//Define a slider
var sliderAsProgressbar = Titanium.UI.createSlider({
      width    : 300,
      min      : 0,             // Minimum value dispayed on  the bar
      max      : 100            // Maximum value dispayed on  the bar

//Set the thumb image with any transparent image
sliderAsProgressbar.thumbImage = 'transparentImage.png';

//Asign initial value to the bar
sliderAsProgressbar.value = 0;

//Disable slider for touch effect
sliderAsProgressbar.touchEnabled = false;

//Bar added to window

On above code a slider API is added with the current window, which have a range from 0 to 100 . Initially the slider value was set to 0. ( sliderAsProgressbar.value = 0; ). As we can touch the slider and change it’s value, we need to block this functionality to give a look and feel of progress bar. So ‘sliderAsProgressbar.touchEnabled = false;’ disable the touch event over the slider. Now lets define click event associated with the button, where onclick of this button slider will start to increase its value and will look as progress bar.

//Event to start progress
startBtn.addEventListener('click', function(){

      //Asign initial value to the bar
      sliderAsProgressbar.value = 0;

      var changedVal = 0, progressInterval;

      //Check the progress interval
      if (progressInterval) {

      //Do the progress stuff
     progressInterval= setInterval(function() {

         //Condition to check max value
         if (val >= 101) {
            //Stop the progressing

             //Asign initial value to the bar
            sliderAsProgressbar.value = 0;

         //Change the bar value to show progress
         sliderAsProgressbar.value = changedVal ;

     }, 1000);

Summary : Here using above code block, I have described the way to use slider as progress bar. Now depending on the condition we can use it various place as progress bar implementation.


Written ByRaju Mahato, Software Developer, Mindfire Solutions


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s