@ishoa/createjs-ui-slider v1.0.2

CreateJS-UI-Slider

A CreateJS Container extension for quickly creating a percentage based slider for user interfaces

Usage

See examples folder for more

    import {HorizontalSlider} from '@ishoa/createjs-ui-slider';

    let spritesheet = new createjs.Spritesheet(data); // The spritesheet data containing the two images for the background and handle for slider

    let spriteBackground = 'sprite-bg'; // The background graphic for the slider

    let spriteHandle = 'sprite-handle'; // The moveable handle for the slider

    let horizontalSlider = new HorizontalSlider(spritesheet, spriteBackground, spriteHandle); // Create a horizontal slider

Classes

Slider

Slider used to scroll through content or adjust settings based on a percentage from 0 - 1 Contains both horizontal or vertical options The sprite for the background image can be either horizontal or vertical in the spritesheet and the class will adjust it based on its longest bounds

• Slider
  • new Slider(spritesheet, backgroundName, handleName)
  • .setActive()
  • .setPercent(percent)
  • .onDrag(event)
  • .convertToWholePercent(number)

new Slider(spritesheet, backgroundName, handleName)

Create the slide from spritesheet data

slider.setActive()

Set the mouse event interaction true or false

Kind: instance method of Slider

slider.setPercent(percent)

Set the handle position

Kind: instance method of Slider

slider.onDrag(event)

Subscribe to the 'change' handle What to do when a drag happens

Kind: instance method of Slider

slider.convertToWholePercent(number)

Convert a decimal percent to a while number

Kind: instance method of Slider

HorizontalSlider

Horizontal left/right slider

• HorizontalSlider
  • .setPercent(percent)
  • .onDrag(event)

horizontalSlider.setPercent(percent)

Set the handle position with the percentage

Kind: instance method of HorizontalSlider

horizontalSlider.onDrag(event)

Subscribe to the 'change' handle What to do when a drag happens

Kind: instance method of HorizontalSlider

VerticalSlider

Vertical up/down slider

• VerticalSlider
  • .setPercent(percent)
  • .onDrag(event)

verticalSlider.setPercent(percent)

Set the handle position with the percentage

Kind: instance method of VerticalSlider

verticalSlider.onDrag(event)

Subscribe to the 'change' handle What to do when a drag happens

Kind: instance method of VerticalSlider

Events

Subscribe to the change event dispatched from the instantiated Slider to know when its been used

@example

horizontalSlider.on('change', function(event){
    let percent = event.percent;
    music.volume = percent;
});