Slider

Introduction¶

Drag thumb on a slider bar.

Author: Rex
Behavior of game object

Live demos¶

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

scene.load.plugin('rexsliderplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexsliderplugin.min.js', true);

Add slider behavior

var slider = scene.plugins.get('rexsliderplugin').add(gameObject, config);

Import plugin¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Install plugin in configuration of game

import SliderPlugin from 'phaser3-rex-plugins/plugins/slider-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexSlider',
            plugin: SliderPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);

Add slider behavior

var slider = scene.plugins.get('rexSlider').add(gameObject, config);

Import class¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Import class

import Slider from 'phaser3-rex-plugins/plugins/slider.js';

Add slider behavior

var slider = new Slider(gameObject, config);

Create instance¶

var slider = scene.plugins.get('rexSlider').add(gameObject, {
    // endPoints: [
    //     {x:0, y:0},
    //     {x:0, y:0}
    // ],
    // value: 0,
    // enable: true,

    // valuechangeCallback: null,
    // valuechangeCallbackScope: null
});

endPoints : An array of 2 end-points ([{x,y}, {x,y}])
value : Initial value between 0 to 1
enable : Set true to drag thumb
valuechangeCallback , valuechangeCallbackScope : Bind this callback to valuechange event

Set end-points¶

slider.setEndPoints(p0x, p0y, p1x, p1y);
// slider.setEndPoints(p0, p1); // p0, p1: {x, y}
// slider.setEndPoints(points); // points: [p0, p1]

Get value¶

var value = slider.value;          // value: between 0 to 1
// var value = slider.getValue();  // value: between 0 to 1
// var value = slider.getValue(min, max);  // value: between min to max

Set value¶

slider.value = newValue;       // newValue: between 0 to 1
// slider.setValue(newValue);  // newValue: between 0 to 1
// slider.setValue(newValue, min, max);  // newValue: between min to max

slider.addValue(inc);  // inc: between 0 to 1
// slider.addValue(inc, min, max);  // inc: between min to max

Fires valuechange event if new value is not equal to current value.

Events¶

Value changed

slider.on('valuechange', function(newValue, prevValue){ /* ... */ });

newValue: between 0 to 1
prevValue: between 0 to 1

Drag¶

Drag enable¶

Get
```
var enable = slider.enable;
```

Set

slider.setEnable(enable);  // enable: true, or false
slider.enable = enable;

Toggle
```
slider.toggleEnable();
```

Is dragging¶

var isDragging = slider.isDragging;