This is a knob in place of a slider.
<script src="dist/tsumami.js"></script>import Tsumami from 'tsumami.js';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);| 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 |
[1] You can use any color specification method in css.(ex:color code,RGB,HSL)
However, it should be a string.
[2] Ignored if mode is center.
[3] Ignored if mode is nomal.
example : example
support : support
MIT License, Copyright (c) 2020 Akatsuki1910
Compatible with rotation from the center.
Miss fixes.
English Update
release
option add : Initial Value Create an example page. Bug fixes.
First Update.