@ircam/gui-components NPM

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),
});