Creating a slider

How to

Create a basic slider in your application that allows a user to move the slider between a range of values.

Solution

Construct the slider variable in the root of your class

var mySlider:Slider = new Slider();
// Placing this at the class root allows other 
// application elements to reference it

Initialize your slider's attributes

// Set location
mySlider.x = 50;
mySlider.y = 50;
// Set width
mySlider.width = 250;

// Optional: Starting value
mySlider.value = 25;
// Optional: Set minimum bound - default of 0
mySlider.minimum = 1;
// Optional: Set maximum bound - default of 100
mySlider.maximum = 50;

// Call event functions when slider is moved
mySlider.addEventListener( SliderEvent.MOVE, sliderChange );
mySlider.addEventListener( SliderEvent.START, sliderStart );
mySlider.addEventListener( SliderEvent.END, sliderStop );

// Add slider to stage
this.addChild( mySlider );

Create the functions that are called by your slider's interaction events

private function sliderChange( event:SliderEvent ) : void {
	// Get and output value of slider when moving
	var newlevel:int = Math.round( event.target.value );
	trace( "slider value: ", newlevel );
}

private function sliderStart( event:SliderEvent ) : void {
	// Get and output value of slider's initial position
	var newlevel:int = Math.round( event.target.value );
	trace( "started moving at: ", newlevel );
}

private function sliderStop( event:SliderEvent ) : void {
	// Get and output value of slider's ending position
	var newlevel:int = Math.round( event.target.value );
	trace( "stopped moving at: ", newlevel );
}

Build Requirements

You must include the following classes in your project:

import qnx.fuse.ui.slider.Slider;
import qnx.fuse.ui.events.SliderEvent;

Discussion

When you create a slider, you declare the Slider variable and set its properties to whatever values your application requires. To add functionality, add SliderEvent listener functions to perform any actions that are defined in the function upon a MOVE, START, or END of slider interaction. You can also reference the value of your slider's current position anywhere in the class by using your slider's value property.