npm

Need private packages and team management tools?Check out npm Orgs. »

@ishoa/createjs-ui-slider

1.0.2 • Public • Published

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

HorizontalSlider

Horizontal left/right slider

VerticalSlider

Vertical up/down slider

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

new Slider(spritesheet, backgroundName, handleName)


Create the slide from spritesheet data

Param Type Description
spritesheet Object spritesheet containing the two images for the slider
backgroundName String The background image for the slider for the length of 0% to 100%
handleName String Name for the draggable handle for the slider

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

Param Type Description
percent Number percentage to set the handle at

slider.onDrag(event)


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

Kind: instance method of Slider

Param Type Description
event Event mouse event passed in

slider.convertToWholePercent(number)


Convert a decimal percent to a while number

Kind: instance method of Slider

Param Type Description
number Number number to convert

HorizontalSlider


Horizontal left/right slider

horizontalSlider.setPercent(percent)


Set the handle position with the percentage

Kind: instance method of HorizontalSlider

Param Type Description
percent Number percentage to set the handle at

horizontalSlider.onDrag(event)


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

Kind: instance method of HorizontalSlider

Param Type Description
event Event mouse event passed in

VerticalSlider


Vertical up/down slider

verticalSlider.setPercent(percent)


Set the handle position with the percentage

Kind: instance method of VerticalSlider

Param Type Description
percent Number percentage to set the handle at

verticalSlider.onDrag(event)


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

Kind: instance method of VerticalSlider

Param Type Description
event Event mouse event passed in

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;
});

install

npm i @ishoa/createjs-ui-slider

Downloadsweekly downloads

2

version

1.0.2

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability