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