Wondering what’s next for npm?Check out our public roadmap! »

    @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

    Unpacked Size

    61.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • avatar