[Widgets] Slider

Adding A Slider

Drag a Slider from the Widgets section onto the middle canvas.

Selecting The Slider

You can select the Slider if it isn't already selected from the Animation Editor at the bottom. The Slider doesn't appear in the resources as it's part of the Scene or other object that you are using.

Modifying The Slider

You can change the Slider image. Setting the ProgressBar images can be done by double clicking on the section or dragging an image from the Resources section.

Accessing The Slider In Code

Slider's can be accessed via their Name or Tag which can be set in the Properties section.

To access the Slider from a scene for example, in code it is simple. You either access it as a Node or cast it to a Slider allowing you to use Slider methods along with Node methods.

Node *rootNode = CSLoader::createNode( "Filepath to .csb file" );
this->addChild( rootNode );

// slider accessed as a node using it's name
Node *slider = rootNode->getChildByName( "Name set in Cocos Studio" );

// slider cast to a slider using it's name
cocos2d::ui::Slider *slider = ( cocos2d::ui::Slider * )rootNode->getChildByName( "Name set in Cocos Studio" );

// slider accessed as a node using it's tag
Node *slider = rootNode->getChildByTag( 5 );

// slider cast to a slider using it's tag
cocos2d::ui::Slider *slider = ( cocos2d::ui::Slider * )rootNode->getChildByTag( 5 );

var rootNode = ccs.load( "Filepath to .json file" );
this.addChild( rootNode.node );

// get the slider by name
var slider = rootNode.node.getChildByName( "Name set in Cocos Studio" );

// get the slider by tag
var slider = rootNode.node.getChildByTag( 5 );

Note: Cocos2d-JS doesn't require casting to use Slider methods.