Capturing variable input with a slider

The Slider class enables the user to input variable data by dragging a thumb across a track. The VolumeSlider class is used to adjust volume levels for media playback. A volume slider control is shown in the illustration below:

Create a volume slider

  1. Import the required classes.
    import flash.display.Sprite;
    import qnx.fuse.ui.slider.VolumeSlider;
  2. Add the following statement to your class, directly before the class signature. This statement sets the stage width and height, the frame rate, and the background color of your application.
    [SWF(height="600", width="1024", frameRate="30",backgroundColor="#FFFFFF")]
  3. Create an application framework by extending Sprite.
    class SliderSample extends Sprite
  4. Create the VolumeSlider variable.
         private var myVSlider:VolumeSlider;
  5. Create a constructor for your class and invoke initializeUI().
         public function SliderSample()
  6. Create the initializeUI function to set up and initialize the UI controls.
    	 private function initializeUI():void
  7. In the initializeUI function, create the VolumeSlider object and position it on the stage.
             var myVSlider:VolumeSlider = new VolumeSlider();
             myVSlider.x = 50;
             myVSlider.y = 50;
  8. In the initializeUI function, set the initial value of the slider control.
             myVSlider.value = 50;
  9. In the initializeUI function, add the event listeners. The event listeners use event types that are defined in the SliderEvent class to capture slider movement, slider start, and slider stop events.
             myVSlider.addEventListener( SliderEvent.MOVE, sliderChange );
             myVSlider.addEventListener( SliderEvent.START, sliderStart );
             myVSlider.addEventListener( SliderEvent.END, sliderStop );
  10. In the initializeUI function, add the VolumeSlider object to the stage.
             this.addChild( myVSlider );
  11. Create the event functions. The functions in the following code sample are used to output the current slider value and thumb state to the console. The values change as the user drags the slider. The thumb skin icon changes as the user drags the thumb from the left edge of the track to the right edge of the track.
    	 function sliderChange( event:SliderEvent ) : void
             var newlevel:int = Math.round( );
             trace( "slider value: ", newlevel );
         function sliderStart( event:SliderEvent ) : void
             var newlevel:int = Math.round( );
             trace( "started moving at: ", newlevel );
         function sliderStop( event:SliderEvent ) : void
             var newlevel:int = Math.round( );
             trace( "stopped moving at: ", newlevel );