iwmlib

Class: Slider

Slider

Class that represents a PixiJS Slider.

new Slider (opts)

slider.js:89

Creates an instance of a Slider.

Name Type Description
opts object optional

An options object to specify to style and behaviour of the slider.

Name Type Default Description
id number auto generated optional

The id of the slider.
x number 0 optional

The x position of the slider. Can be also set after creation with slider.x = 0.
y number 0 optional

The y position of the slider. Can be also set after creation with slider.y = 0.
theme string | Theme dark optional

The theme to use for this slider. Possible values are dark, light, red or a Theme object.
width number 250 optional

The width of the slider.
height number 2 optional

The height of the slider.
container PIXI.DisplayObject window.app|object optional

The container where the slider events should be attached to.
fill number Theme.fill optional

The color of the slider background as a hex value.
fillAlpha number Theme.fillAlpha optional

The alpha value of the background.
stroke number Theme.stroke optional

The color of the border as a hex value.
strokeWidth number Theme.strokeWidth optional

The width of the border in pixel.
strokeAlpha number Theme.strokeAlpha optional

The alpha value of the border.
controlFill number Theme.stroke optional

The color of the slider control background as a hex value.
controlFillAlpha number Theme.strokeAlpha optional

The alpha value of the background.
controlStroke number Theme.stroke optional

The color of the border as a hex value.
controlStrokeWidth number Theme.strokeWidth * 0.8 optional

The width of the border in pixel.
controlStrokeAlpha number Theme.strokeAlpha optional

The alpha value of the border.
controlRadius number 16 optional

The radius of the slider control.
disabled boolean false optional

Is the slider disabled? When disabled, the slider has a lower alpha value and cannot be clicked (interactive is set to false).
onStart onStartCallback optional

Executed when the slider control starts to move.
onUpdate onUpdateCallback optional

Executed when the slider control is moved.
onComplete onCompleteCallback optional

Executed when the slider control was dropped.
tooltip string | object optional

A string for the label of the tooltip or an object to configure the tooltip to display.
visible boolean true optional

Is the slider initially visible (property visible)?
See:
Example
// Create the app
const app = new PIXIApp({
    view: canvas,
    width: 900,
    height: 250
}).setup().run()

// Create the slider
const slider = new Slider({
    x: 10,
    y: 20
})

// Add the slider to a DisplayObject
app.scene.addChild(slider)

Extends

  • PIXI.Container

Members

disabled boolean

Gets or sets the disabled state. When disabled, the slider cannot be clicked.

value number

Gets or sets the value.

Methods

hide ()Slider

slider.js:458

Hides the slider (sets his alpha values to 1).

Returns:
Type Description
Slider A reference to the slider for chaining.

layout ()Slider

slider.js:287

Should be called to refresh the layout of the slider. Can be used after resizing.

Returns:
Type Description
Slider A reference to the slider for chaining.

show ()Slider

slider.js:442

Shows the slider (sets his alpha values to 1).

Returns:
Type Description
Slider A reference to the slider for chaining.