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 |
