Tsumami.js NPM

Tsumami.js

This is a knob in place of a slider.

Installation

<script src="dist/tsumami.js"></script>

import Tsumami from 'tsumami.js';

Usage

const tsumamiValue = (()=>{
  const val = Object.create(null);
  Object.defineProperty(val, 'value', {
    set: (value)=>{
      //processing
    }
  });
  return val;
})();

const option = {
  obj: tsumamiValue
}

const tsumami = new Tsumami(option);

Options

Use	Variable Name	Default Value	Remarks
Size	size	100
Target	target	document.getElementById("tsumami")
Background Color	bgcolor	"red"	css color 1
Pinch Color	tmmcolor	"yellow"	css color 1
Meter Background Color	mbgcolor	"black"	css color 1
Meter Size	meterSize	10
Meter Angle	degree	270	0~360
Meter Scale	scale	1.2
Min Value	min	0	min < max 2
Max Value	max	100	min < max 2
Value Obj	obj	""	tsumamiValue
Meter Color	mcolor	"blue"	css color 1
Point Color	point	"purple"	css color 1
Initial Value	value	0	min ≤ value ≤ max 2
Mode	mode	nomal	nomal or center
Center Value	centerValue	50	0 ≤ centerValue 3