npm package: @ishoa/createjs-ui-slider
Description: A CreateJS Container extension for quickly creating a percentage based slider for user interfaces
Author: Shane Coates
Latest version: 1.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

<dl>
<dt><a href="#Slider">Slider</a></dt>
<dd><p>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</p>
</dd>
<dt><a href="#HorizontalSlider">HorizontalSlider</a></dt>
<dd><p>Horizontal left/right slider</p>
</dd>
<dt><a href="#VerticalSlider">VerticalSlider</a></dt>
<dd><p>Vertical up/down slider</p>
</dd>
</dl>

<a name="Slider"></a>

## 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](#Slider)
    * [new Slider(spritesheet, backgroundName, handleName)](#new_Slider_new)
    * [.setActive()](#setActive)
    * [.setPercent(percent)](#setPercent)
    * [.onDrag(event)](#onDrag)
    * [.convertToWholePercent(number)](#convertToWholePercent)

<a name="new_Slider_new"></a>

### new Slider(spritesheet, backgroundName, handleName)
---
Create the slide from spritesheet data

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

<a name="setActive"></a>

### slider.setActive()
---
Set the mouse event interaction true or false

**Kind**: instance method of [<code>Slider</code>](#Slider)  

<a name="setPercent"></a>

### slider.setPercent(percent)
---
Set the handle position

**Kind**: instance method of [<code>Slider</code>](#Slider)  

| Param | Type | Description |
| --- | --- | --- |
| percent | <code>Number</code> | percentage to set the handle at |

<a name="onDrag"></a>

### slider.onDrag(event)
---
Subscribe to the 'change' handle
What to do when a drag happens

**Kind**: instance method of [<code>Slider</code>](#Slider)  

| Param | Type | Description |
| --- | --- | --- |
| event | <code>Event</code> | mouse event passed in |

<a name="convertToWholePercent"></a>

### slider.convertToWholePercent(number)
---
Convert a decimal percent to a while number

**Kind**: instance method of [<code>Slider</code>](#Slider)  

| Param | Type | Description |
| --- | --- | --- |
| number | <code>Number</code> | number to convert |

<a name="HorizontalSlider"></a>

## HorizontalSlider
---
Horizontal left/right slider

* [HorizontalSlider](#HorizontalSlider)
    * [.setPercent(percent)](#HorizontalsetPercent)
    * [.onDrag(event)](#HorizontalonDrag)

<a name="HorizontalsetPercent"></a>

### horizontalSlider.setPercent(percent)
---
Set the handle position with the percentage

**Kind**: instance method of [<code>HorizontalSlider</code>](#HorizontalSlider)  

| Param | Type | Description |
| --- | --- | --- |
| percent | <code>Number</code> | percentage to set the handle at |

<a name="HorizontalonDrag"></a>

### horizontalSlider.onDrag(event)
---
Subscribe to the 'change' handle
What to do when a drag happens

**Kind**: instance method of [<code>HorizontalSlider</code>](#HorizontalSlider)  

| Param | Type | Description |
| --- | --- | --- |
| event | <code>Event</code> | mouse event passed in |

<a name="VerticalSlider"></a>

## VerticalSlider
---
Vertical up/down slider

* [VerticalSlider](#VerticalSlider)
    * [.setPercent(percent)](#VerticalsetPercent)
    * [.onDrag(event)](#VerticalonDrag)

<a name="VerticalsetPercent"></a>

### verticalSlider.setPercent(percent)
---
Set the handle position with the percentage

**Kind**: instance method of [<code>VerticalSlider</code>](#VerticalSlider)  

| Param | Type | Description |
| --- | --- | --- |
| percent | <code>Number</code> | percentage to set the handle at |

<a name="VerticalonDrag"></a>

### verticalSlider.onDrag(event)
---
Subscribe to the 'change' handle
What to do when a drag happens

**Kind**: instance method of [<code>VerticalSlider</code>](#VerticalSlider)  

| Param | Type | Description |
| --- | --- | --- |
| event | <code>Event</code> | 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;
});
```