iwmlib API Documentation

Class: Slider

Slider

Class that represents a PixiJS Slider.

new Slider (opts)

slider.js:55

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.