@ircam/gui-components

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