ccgui/test/ControlSliderTest.js

/**
 * Created by Huabin LING on 1/2/14.
 */

var ControlSliderTest = GuiTest.extend({
    _displayValueLabel:null,

    ctor:function () {
        this._super();

        var winSize = cc.Director.getInstance().getWinSize();

        // Add a label in which the slider value will be displayed
        this._displayValueLabel = cc.LabelTTF.create("Move the slider thumb!\nThe lower slider is restricted.", "Arial", 32);
        this._displayValueLabel.retain();
        this._displayValueLabel.setAnchorPoint(0.5, -1.0);
        this._displayValueLabel.setPosition(winSize.width / 1.7, winSize.height / 2.0);
        this.addChild(this._displayValueLabel);

        // Add the slider
        var slider = cc.ControlSlider.create(res.sliderTrack_png, res.sliderProgress_png, res.sliderThumb_png);
        slider.setAnchorPoint(0.5, 1.0);
        slider.setMinimumValue(0.0); // Sets the min value of range
        slider.setMaximumValue(5.0); // Sets the max value of range
        slider.setPosition(winSize.width / 2.0, winSize.height / 2.0 + 16);
        slider.setTag(1);

        // When the value of the slider will change, the given selector will be call
        slider.addTargetWithActionForControlEvents(this, this.valueChanged, cc.CONTROL_EVENT_VALUECHANGED);

        // Add the second slider with restrict value range
        var restrictSlider = cc.ControlSlider.create(res.sliderTrack_png, res.sliderProgress_png, res.sliderThumb_png);
        restrictSlider.setAnchorPoint(0.5, 1.0);
        restrictSlider.setMinimumValue(0.0); // Sets the min value of range
        restrictSlider.setMaximumValue(5.0); // Sets the max value of range
        restrictSlider.setMaximumAllowedValue(4.0);
        restrictSlider.setMinimumAllowedValue(1.5);
        restrictSlider.setValue(3.0);
        restrictSlider.setPosition(winSize.width / 2.0, winSize.height / 2.0 - 24);
        restrictSlider.setTag(2);

        //same with restricted
        restrictSlider.addTargetWithActionForControlEvents(this, this.valueChanged, cc.CONTROL_EVENT_VALUECHANGED);

        this.addChild(slider);
        this.addChild(restrictSlider);
    },
    valueChanged:function (sender, controlEvent) {
        // Change value of label.
        if (sender.getTag() == 1)
            this._displayValueLabel.setString("Upper slider value = " + sender.getValue().toFixed(2));
        if (sender.getTag() == 2)
            this._displayValueLabel.setString("Lower slider value = " + sender.getValue().toFixed(2));
    }
});

ControlSliderTest.create = function () {
    return new ControlSliderTest();
};