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

| 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)
  • .onDrag(event)

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)
  • .onDrag(event)

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