GUI-Components

Set of simple gui components (to be extended)

Install

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

Available Components

• Slider - example

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
    • new Slider(options)
    • .value : Number
    • .reset()
    • .resize(width, height)

gui-components~Slider

Versatile canvas based slider.

Kind: inner class of gui-components

• ~Slider
  • new Slider(options)
  • .value : Number
  • .reset()
  • .resize(width, height)

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