Class Slider

Draggable slider component for selecting numeric values. Features customizable handle appearance with state-specific styles for hover and pressed states.

Example

const slider = new Slider({
  width: 200,
  height: 4,
  minValue: 0,
  maxValue: 100,
  startingValue: 50,
  activeColor: 0x4a90d9,
  inactiveColor: 0xcccccc,
  circleRadius: 8,
  circleColor: 0xffffff,
});

slider.onChange((value) => console.log('Slider value:', value));
stage.addChild(slider);

Hierarchy

Container
- Slider

Constructors

constructor

new Slider(t: SliderOptions): Slider
Creates a new Slider instance.
Parameters
- t: SliderOptions
Returns Slider
Overrides PIXI.Container.constructor
- Defined in Components/Slider.ts:180

Properties

alpha

alpha: number

angle

angle: number

backgroundGraphic

backgroundGraphic: Graphics

buttonMode

buttonMode: boolean

children

children: DisplayObject[]

circleGraphic

circleGraphic: Graphics

circleRadius

circleRadius: number

curOutlineWidth

curOutlineWidth: number

currentValue

currentValue: number

cursor

cursor: string

`Optional`destroyed

destroyed?: boolean

eventMode

eventMode: EventMode

height

height: number

hitArea

hitArea:
    | Rectangle
    | RoundedRectangle
    | { contains(x: number, y: number): boolean }
    | null

interactive

interactive: boolean

interactiveChildren

interactiveChildren: boolean

isDragging

isDragging: boolean

Whether the slider handle is currently being dragged

isHovered

isHovered: boolean

lastX

lastX: number

mask

mask: DisplayObject | null

options

options: ResolvedSliderOptions

parent

parent: Container | null

pivot

pivot: Point

position

position: Point

renderable

renderable: boolean

resolvedScale

resolvedScale: { x: number; y: number } | null

rotation

rotation: number

scale

scale: Point

sortableChildren

sortableChildren: boolean

visible

visible: boolean

width

width: number

worldTransform

worldTransform: {
    a: number;
    b: number;
    c: number;
    d: number;
    tx: number;
    ty: number;
}

x

x: number

y

y: number

Methods

addChild

addChild<T extends DisplayObject>(...child: T[]): T
Type Parameters
- T extends DisplayObject
Parameters
- ...child: T[]
Returns T
Inherited from PIXI.Container.addChild
- Defined in global.d.ts:123

addChildAt

addChildAt<T extends DisplayObject>(child: T, index: number): T
Type Parameters
- T extends DisplayObject
Parameters
- child: T
- index: number
Returns T
Inherited from PIXI.Container.addChildAt
- Defined in global.d.ts:124

addListener

addListener(event: string, fn: EventListener): this
Parameters
- event: string
- fn: EventListener
Returns this
Inherited from PIXI.Container.addListener
- Defined in global.d.ts:105

calculateValue

calculateValue(): number
Returns number
- Defined in Components/Slider.ts:268

destroy

destroy(
    options?:
        | boolean
        | { baseTexture?: boolean; children?: boolean; texture?: boolean },
): void
Parameters
- Optionaloptions: boolean | { baseTexture?: boolean; children?: boolean; texture?: boolean }
Returns void
Inherited from PIXI.Container.destroy
- Defined in global.d.ts:113

emit

emit(event: string, ...args: unknown[]): boolean
Parameters
- event: string
- ...args: unknown[]
Returns boolean
Inherited from PIXI.Container.emit
- Defined in global.d.ts:104

getBounds

getBounds(skipUpdate?: boolean): Rectangle
Parameters
- OptionalskipUpdate: boolean
Returns Rectangle
Inherited from PIXI.Container.getBounds
- Defined in global.d.ts:109

getChildAt

getChildAt(index: number): DisplayObject
Parameters
- index: number
Returns DisplayObject
Inherited from PIXI.Container.getChildAt
- Defined in global.d.ts:130

getChildIndex

getChildIndex(child: DisplayObject): number
Parameters
- child: DisplayObject
Returns number
Inherited from PIXI.Container.getChildIndex
- Defined in global.d.ts:128

getGlobalPosition

getGlobalPosition(point?: Point, skipUpdate?: boolean): Point
Parameters
- Optionalpoint: Point
- OptionalskipUpdate: boolean
Returns Point
Inherited from PIXI.Container.getGlobalPosition
- Defined in global.d.ts:108

getLocalBounds

getLocalBounds(rect?: Rectangle): Rectangle
Parameters
- Optionalrect: Rectangle
Returns Rectangle
Inherited from PIXI.Container.getLocalBounds
- Defined in global.d.ts:110

off

off(event: string, fn?: EventListener, context?: unknown): this
Parameters
- event: string
- Optionalfn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PIXI.Container.off
- Defined in global.d.ts:102

offChange

offChange(t: (v: number) => void): void
Removes a previously registered change listener.
Parameters
- t: (v: number) => void
Returns void
- Defined in Components/Slider.ts:344

on

on(event: string, fn: EventListener, context?: unknown): this
Parameters
- event: string
- fn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PIXI.Container.on
- Defined in global.d.ts:101

once

once(event: string, fn: EventListener, context?: unknown): this
Parameters
- event: string
- fn: EventListener
- Optionalcontext: unknown
Returns this
Inherited from PIXI.Container.once
- Defined in global.d.ts:103

onChange

onChange(t: (v: number) => void): void
Registers a callback to be invoked when the slider value changes.
Parameters
- t: (v: number) => void
Returns void
- Defined in Components/Slider.ts:352

redrawBar

redrawBar(): void
Returns void
- Defined in Components/Slider.ts:326

redrawCircle

redrawCircle(): void
Returns void
- Defined in Components/Slider.ts:274

removeAllListeners

removeAllListeners(event?: string): this
Parameters
- Optionalevent: string
Returns this
Inherited from PIXI.Container.removeAllListeners
- Defined in global.d.ts:107

removeChild

removeChild<T extends DisplayObject>(...child: T[]): T
Type Parameters
- T extends DisplayObject
Parameters
- ...child: T[]
Returns T
Inherited from PIXI.Container.removeChild
- Defined in global.d.ts:125

removeChildAt

removeChildAt(index: number): DisplayObject
Parameters
- index: number
Returns DisplayObject
Inherited from PIXI.Container.removeChildAt
- Defined in global.d.ts:126

removeChildren

removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[]
Parameters
- OptionalbeginIndex: number
- OptionalendIndex: number
Returns DisplayObject[]
Inherited from PIXI.Container.removeChildren
- Defined in global.d.ts:127

removeListener

removeListener(event: string, fn?: EventListener): this
Parameters
- event: string
- Optionalfn: EventListener
Returns this
Inherited from PIXI.Container.removeListener
- Defined in global.d.ts:106

resolveScale

resolveScale(): { x: number; y: number }
Returns { x: number; y: number }
- Defined in Components/Slider.ts:254

setChildIndex

setChildIndex(child: DisplayObject, index: number): void
Parameters
- child: DisplayObject
- index: number
Returns void
Inherited from PIXI.Container.setChildIndex
- Defined in global.d.ts:129

sortChildren

sortChildren(): void
Returns void
Inherited from PIXI.Container.sortChildren
- Defined in global.d.ts:132

swapChildren

swapChildren(a: DisplayObject, b: DisplayObject): void
Parameters
- a: DisplayObject
- b: DisplayObject
Returns void
Inherited from PIXI.Container.swapChildren
- Defined in global.d.ts:131

toGlobal

toGlobal(position: { x: number; y: number }, point?: Point): Point
Parameters
- position: { x: number; y: number }
- Optionalpoint: Point
Returns Point
Inherited from PIXI.Container.toGlobal
- Defined in global.d.ts:111

toLocal

toLocal(
    position: { x: number; y: number },
    from?: DisplayObject,
    point?: Point,
): Point
Parameters
- position: { x: number; y: number }
- Optionalfrom: DisplayObject
- Optionalpoint: Point
Returns Point
Inherited from PIXI.Container.toLocal
- Defined in global.d.ts:112

Class Slider

Example

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Returns Slider

Properties

alpha

angle

backgroundGraphic

buttonMode

children

circleGraphic

circleRadius

curOutlineWidth

currentValue

cursor

Optionaldestroyed

eventMode

height

hitArea

interactive

interactiveChildren

isDragging

isHovered

lastX

mask

options

parent

pivot

position

renderable

resolvedScale

rotation

scale

sortableChildren

visible

width

worldTransform

x

y

Methods

addChild

Type Parameters

Parameters

Returns T

addChildAt

Type Parameters

Parameters

Returns T

addListener

Parameters

Returns this

calculateValue

Returns number

destroy

Parameters

Returns void

emit

Parameters

Returns boolean

getBounds

Parameters

Returns Rectangle

getChildAt

Parameters

Returns DisplayObject

getChildIndex

Parameters

Returns number

getGlobalPosition

Parameters

Returns Point

getLocalBounds

Parameters

`Optional`destroyed