Creating a media slider

How to

Create a media slider in your application that allows a user to move the slider between a range of values with the ability to display a secondary value in the form of a filled progress bar within the slider.

Solution

Construct the media slider variable in the root of your class

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

Initialize your slider's attributes

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

// Optional: Starting value
myMSlider.value = 33;
// Optional: Set minimum bound - default of 0
myMSlider.minimum = 1;
// Optional: Set maximum bound - default of 100
myMSlider.maximum = 100;
// Set value for display of cache progress between 0 and 1.0
myMSlider.cachedValue = 0.67;

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

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

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.MediaSlider;
import qnx.fuse.ui.events.SliderEvent;

Discussion

When you create a media slider, you declare the MediaSlider 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. The cachedValue property designates a secondary marker within the slider that represents a percentage value in decimal format between 0 and 1.0. This is typically used to represent the amount of a piece of media loaded and available.