tsumami.js
v2.0.0
Published
This is a knob in place of a slider.
Downloads
6
Readme
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 |
LINK
example : example
support : support
License
MIT License, Copyright (c) 2020 Akatsuki1910
Update
v2.0.0
Compatible with rotation from the center.
v1.0.2
Miss fixes.
v1.0.1
English Update
v1.0.0
release
v0.2.0
option add : Initial Value Create an example page. Bug fixes.
v0.1.0
First Update.