Flash Range Slider Component

Question

Is there something similar to this jquery component in flash or are there any ready examples on how to do that?

Thanks.

Fang

Answer 1

I do not know of any built-in (or third party, for that matter) components of that sort. I'm sure that some third-party ones must exist, however, but they are unlikely to be free.

You can create your own without too much trouble. I have created a basic working version that you can build on if you want:

// Main class, shows how to use other classes:

import flash.display.*;
import flash.events.*;
import flash.text.TextField;


public class Main extends Sprite
{
    private var output:TextField;
    private var range:RangeSlider;

    public function Main()
    {
        output = new TextField();
        addChild(output);

        // SliderImage and ThumbImage are PNGs exported (inheriting from BitmapData) from the fla
        var thumb:SliderThumb = new SliderThumb(new ThumbImage(20, 20), stage);
        range = new RangeSlider(new SliderImage(1, 1), thumb, 100);

        range.x = 55;
        range.y = 55;

        range.addEventListener(Event.CHANGE, updateOutput);

        addChild(range);

        updateOutput();
    }

    private function updateOutput(e:Event = null):void
    {
        output.text = range.min + ' to ' + range.max;
    }
}

SliderThumb class:

import flash.display.*;
import flash.events.*;
import flash.geom.Point;

public class SliderThumb extends Sprite
{
    private var image:Bitmap;
    private var mouseIsDown:Boolean;
    private var _stage:Stage;

    public var min:Number;
    public var max:Number;


    public function SliderThumb(imageData:BitmapData, _stage:Stage)
    {
        min = max = 0;

        this._stage = _stage;

        image = new Bitmap(imageData);
        addChild(image);

        addEventListener(Event.ADDED_TO_STAGE, init);
    }

    private function init(e:Event):void
    {
        removeEventListener(Event.ADDED_TO_STAGE, init);

        mouseIsDown = false;

        // Center image:
        image.x = -Math.round(image.width / 2);
        image.y = -Math.round(image.height / 2);

        addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
        _stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
        _stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMove);
    }

    public function clone():SliderThumb
    {
        var clone:SliderThumb = new SliderThumb(image.bitmapData, _stage);

        clone.min = min;
        clone.max = max;

        return clone;
    }

    private function mouseDown(e:MouseEvent):void
    {
        mouseIsDown = true;
    }

    private function mouseUp(e:MouseEvent):void
    {
        mouseIsDown = false;
    }

    private function mouseMove(e:MouseEvent):void
    {
        if (mouseIsDown) {
            x = parent.globalToLocal(new Point(_stage.mouseX, 0)).x;

            if (x < min) {
                x = min;
            }
            else if (x > max) {
                x = max;
            }

            dispatchEvent(new Event(Event.CHANGE));
        }
    }
}

RangeSlider class:

import flash.display.*;
import flash.events.*;
import flash.geom.Point;

public class RangeSlider extends Sprite
{
    private var background:BitmapData;
    private var sliders:Array;

    // Background is a one-pixel wide image that will be tiled horizonatally to give the slider its look
    public function RangeSlider(background:BitmapData, slider:SliderThumb, size:Number)
    {
        this.background = background;

        slider.min = 0;
        slider.max = size;
        sliders = [slider, slider.clone()];
        for each (slider in sliders) {
            addChild(slider);
            slider.addEventListener(Event.CHANGE, function (e:Event) { dispatchEvent(e); });        // Pass on the CHANGE event
        }
        sliders[1].x = size;

        this.size = size;
    }

    public function set size(value:Number):void
    {
        // Update background:
        graphics.clear();
        graphics.beginBitmapFill(background);           // Tiles by default
        graphics.drawRect(0, 0, value, background.height);
        graphics.endFill();
    }

    // Returns the position of the first slider (from 0 to size):
    public function get min():Number
    {
        return sliders[0].x;
    }

    // Returns the position of the second slider (from 0 to size):
    public function get max():Number
    {
        return sliders[1].x;
    }
}

Discourse

That's awesome. Thanks a lot. I missing SliderImage class, but I assume it is just a BitmapData. – Fang

Yeah, ThumbImage and SliderImage both inherit from BitmapData. – Discourse

One thing to be aware of is that the size of the slider (i.e. max value) corresponds to its width in pixels, which is probably not too desirable. Also, the minimum value is always 0 in the current implementation. Like I said, something to build on :-) – Discourse

Answer 2

If you're open to importing the Flex libraries, there are a couple of already built solutions:

1. The Flex 3 MX library has a slider component that supports two thumbs.
2. Patrick Mowrer made a Flex 4 Spark slider component that also implements an option for multiple thumbs. However, I think at the current moment he still has a trackHighlight feature (as seen in the jQuery UI example) on his To-Do list. Although in the Flex 4 skinning framework, it shouldn't that hard of thing to implement. It's available freely on GitHub: https://github.com/pmowrer/spark-components

As I said both these solutions require using the Flex libraries, which means extra overhead. Nevertheless, they are valid "Flash" solutions.

Pisciculture