Numerous Panicky Mimes

    @ircam/gui-components

    1.0.6 • Public • Published

    GUI-Components

    Set of simple gui components (to be extended)

    Install

    npm install [--save] @ircam/gui-components
    

    Available Components

    Usage

    import { Slider} from '@ircam/gui-components';
    
    const slider = new Slider({
      mode: 'jump',
      container: '#container',
      default: 0.6,
      markers: [0.5],
      callback: (value) => console.log(value),
    });

    API

    gui-components

    gui-components~Slider

    Versatile canvas based slider.

    Kind: inner class of gui-components

    new Slider(options)

    Param Type Default Description
    options Object Override default parameters.
    [options.mode] 'jump' | 'proportionnal' | 'handle' 'jump' Mode of the slider: - in 'jump' mode, the value is changed on 'touchstart' or 'mousedown', and on move. - in 'proportionnal' mode, the value is updated relatively to move. - in 'handle' mode, the slider can be grabbed only around its value.
    [options.callback] function Callback to be executed when the value of the slider changes.
    [options.width] Number 200 Width of the slider.
    [options.height] Number 30 Height of the slider.
    [options.min] Number 0 Minimum value.
    [options.max] Number 1 Maximum value.
    [options.step] Number 0.01 Step between each consecutive values.
    [options.default] Number 0 Default value.
    [options.container] String | Element 'body' CSS Selector or DOM element in which inserting the slider.
    [options.backgroundColor] String '#464646' Background color of the slider.
    [options.foregroundColor] String 'steelblue' Foreground color of the slider.
    [options.orientation] 'horizontal' | 'vertical' 'horizontal' Orientation of the slider.
    [options.markers] Array [] List of values where markers should be displayed on the slider.
    [options.showHandle] Boolean true In 'handle' mode, define if the draggable should be show or not.
    [options.handleSize] Number 20 Size of the draggable zone.
    [options.handleColor] String 'rgba(255, 255, 255, 0.7)' Color of the draggable zone (when showHandle is true).

    Example

    import { Slider} from 'gui-components';
    
    const slider = new Slider({
      mode: 'jump',
      container: '#container',
      default: 0.6,
      markers: [0.5],
      callback: (value) => console.log(value),
    });

    slider.value : Number

    Current value of the slider.

    Kind: instance property of Slider

    slider.reset()

    Reset the slider to its default value.

    Kind: instance method of Slider

    slider.resize(width, height)

    Resize the slider.

    Kind: instance method of Slider

    Param Type Description
    width Number New width of the slider.
    height Number New height of the slider.

    License

    BSD-3-Clause

    Keywords

    none

    Install

    npm i @ircam/gui-components

    DownloadsWeekly Downloads

    3

    Version

    1.0.6

    License

    BSD-3-Clause

    Unpacked Size

    104 kB

    Total Files

    9

    Last publish

    Collaborators

    • jipodine
    • norbert.schnell
    • b-ma