Free ActionScript

Flash AS2 & AS3 Tutorials, Game Code, Effects, Source Files & Sample Downloads

Custom number range sliders

No Comments »

I needed a custom range slider for selecting prices. It needed to have two draggers. One of low price, one for high price. Here is the result.

Low and High value is calculated based on the size of the slider track.

Easy to use and easy to customize. Only 3 movieclips make up the whole thing. Doesn’t use annoying built in flash components.

View Code ACTIONSCRIPT
package 
{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.text.TextField;
 
	/**
	 * Custom Number Range Slider
	 * 
	 * @author 		Philip Radvan
	 * @url 		http://www.freeactionscript.com
	 * @version 	1.0
	 * 
	 */
	public class  NumberRangeSlider extends Sprite
	{
		var scrubberLeftTrack:Rectangle;
		var scrubberRightTrack:Rectangle;
 
		private var minValue:Number = 0;
		private var lowValue:Number = 10;
		private var highValue:Number = 30;
		private var maxValue:Number = 300;
 
		function NumberRangeSlider()
		{
			init();			
		}
 
		/**
		 * init method
		 */
		private function init():void
		{
			//some error handling
			if (lowValue >= highValue)
			{
				trace("Fatal Error! lowValue must be less than highValue.");
				return;
			}
			if (highValue > maxValue)
			{
				trace("Warning! highValue is more than maxValue.");
				highValue = maxValue;
			}
			if (highValue > maxValue)
			{
				trace("Warning! lowValue is less than minValue.");
				lowValue = minValue;
			}
 
			//update display
			updateDisplay();
 
			//position scrubbers
			numberRangeSliderMc.scrubberLeft.x = lowValue;
			numberRangeSliderMc.scrubberRight.x = highValue;
 
			//setup dragging track rectangle (dragging range)
			scrubberLeftTrack = new Rectangle(	lowValue, 
												0, 
												numberRangeSliderMc.scrubberRight.x-highValue, 
												0);
 
			scrubberRightTrack = new Rectangle(	highValue, 
												0, 
												numberRangeSliderMc.sliderTrack.width-highValue, 
												0);
 
			//Scrubber button Listeners
			numberRangeSliderMc.scrubberLeft.addEventListener(MouseEvent.MOUSE_DOWN, onScrubberLeftDown);	
			numberRangeSliderMc.scrubberLeft.addEventListener(MouseEvent.MOUSE_UP, onScrubberUp);
 
			numberRangeSliderMc.scrubberRight.addEventListener(MouseEvent.MOUSE_DOWN, onScrubberRightDown);
			numberRangeSliderMc.scrubberRight.addEventListener(MouseEvent.MOUSE_UP, onScrubberUp);
 
			stage.addEventListener(MouseEvent.MOUSE_UP, onScrubberUp);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onScrubberMove);
		}
 
		/**
		 * Scrubber button Handlers
		 */
		private function onScrubberMove(evt:MouseEvent):void
		{
			//update current high value
			var highPercent:Number = numberRangeSliderMc.scrubberRight.x / numberRangeSliderMc.sliderTrack.width * 100;
			highValue = Math.floor(maxValue * highPercent / 100);
			numberRangeSliderMc.high_txt.text = highValue;
 
			//update current low value
			var lowPercent:Number = numberRangeSliderMc.scrubberLeft.x / numberRangeSliderMc.sliderTrack.width * 100;	
			lowValue = Math.floor(maxValue * lowPercent / 100);
			numberRangeSliderMc.low_txt.text = lowValue;
 
		}
		private function onScrubberLeftDown(evt:MouseEvent):void
		{
			var object = evt.target;
			object.startDrag(false, scrubberLeftTrack);
		}
		private function onScrubberRightDown(evt:MouseEvent):void
		{
			var object = evt.target;
			object.startDrag(false, scrubberRightTrack);
		}
		private function onScrubberUp(evt:MouseEvent):void
		{
			updateDragRange();
 
			numberRangeSliderMc.scrubberRight.stopDrag();
			numberRangeSliderMc.scrubberLeft.stopDrag();
		}
 
		/**
		 * This updates the dragging range rectangles
		 */
		private function updateDragRange():void
		{
			//LEFT
			scrubberLeftTrack.x = numberRangeSliderMc.sliderTrack.x;
			scrubberLeftTrack.y = numberRangeSliderMc.sliderTrack.y;
			scrubberLeftTrack.width = numberRangeSliderMc.scrubberRight.x - 1;
			scrubberLeftTrack.height = 0;
 
			//RIGHT
			scrubberRightTrack.x = numberRangeSliderMc.scrubberLeft.x + 1;
			scrubberRightTrack.y = numberRangeSliderMc.sliderTrack.y;
			scrubberRightTrack.width = numberRangeSliderMc.sliderTrack.width - numberRangeSliderMc.scrubberLeft.x - 1;
			scrubberRightTrack.height = 0;
		}
 
		/**
		 * This updates the text boxes in the number range slider
		 */
		private function updateDisplay():void
		{
			//set display
			numberRangeSliderMc.min_txt.text = minValue;
			numberRangeSliderMc.max_txt.text = maxValue;
			numberRangeSliderMc.low_txt.text = lowValue;
			numberRangeSliderMc.high_txt.text = highValue;
		}
	}	
}
//the end
Download Fla Sample

Download Fla Sample

Leave a Reply

You must be logged in to post a comment.