If you're following with the LoanCalc app, the next code should replace the code in your window2.js file. We'll also add a label to identify what the switch component does and a view component to hold it all together:

//create an instance of a window
module.exports = (function(){
var win = Ti.UI.createWindow({
  backgroundColor: '#BBB',
  title: 'Settings'
});

//create the view, this will hold all of our UI controls 
var view = Ti.UI.createView({
  width: 300,
  height: 70,
  left: 10,
  top: 10,
  backgroundColor: '#fff',
  borderRadius: 5
});

//create a label to identify the switch control to the user
var labelSwitch = Ti.UI.createLabel({
    width: Ti.UI.SIZE,
    height: 30,
    top: 20,
    left: 20,
    font: {fontSize: 14, fontFamily: 'Helvetica', 
          fontWeight: 'bold'},
    text: 'Auto Show Chart?'
});
view.add(labelSwitch);

//create the switch object
var switchChartOption = Ti.UI.createSwitch({
  right: 20,
  top: 20,
  value: false
});
view.add(switchChartOption);


win.add(view);

return win;
})();

Now let's write the slider code; go back to your app.js file and type the following code underneath the interestRateRow.add(tfInterestRate); line:

//create the slider to change the loan length
var lengthSlider = Ti.UI.createSlider({
  width: 140,
  top: 200,
  right: 20,
  min: 12,
  max: 60,
  value: numberMonths,
  thumbImage: 'sliderThumb.png',
  highlightedThumbImage: 'sliderThumbSelected.png'
});

lengthSlider.addEventListener('change', function(e){
  //output the value to the console for debug
   console.log(lengthSlider.value); 
   //update our numberMonths variable
  numberMonths = Math.round(lengthSlider.value); 
   //update label
  labelLoanLength.text = 'Loan length (' + Math.round(numberMonths) + ' months):';
});

loanLengthRow.add(lengthSlider);

In this recipe, we added two new components to two separate views within two separate windows. The first component—a switch—is fairly straightforward, and apart from the standard layout and positioning properties, it takes one main boolean value to determine its on or off status. It also has only one event, change, which is executed whenever the switch changes from the on to off position or vice versa.

On the Android platform, the switch can be altered to appear as a toggle button (default) or a checkbox. Additionally, Android users can display a text label using the title property, which can be changed programmatically by using the titleOff and titleOn properties.

The slider component is more interesting and has many more properties than a Switch. sliders are useful for instances where we want to allow the user to choose between a range of values; in this case, it is a numeric range of months from 12 to 60. This is a much more effective method of choosing a number from a range than listing all the possible options in a picker, and is much safer than letting a user enter possibly invalid values via a textfield or textarea component.

Pretty much all of the slider can be styled using the default properties available in the Titanium API, including thumbImage and highlightedThumbImage, as we did in this recipe. The highlightedThumbImage property allows you to specify the image that is used when the slider is being selected and used, allowing you to have a default and an active state.

Try extending the styling of the slider component using images for the left- and right-hand sides of the track, which is the element that runs horizontally underneath the moving switch.