-
Notifications
You must be signed in to change notification settings - Fork 1
/
input.html
50 lines (47 loc) · 1.71 KB
/
input.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8"> <title>ctrl-panel</title>
<style>
section {
display: flex;
flex-direction: column;
gap: 16px;
}
meter-marker {
width: 60px;
height: 60px;
outline: 1px solid black;
}
</style>
</head>
<body>
<section>
<input-button>test 123 abc</input-button>
<input-knob min="10" max="20" step="2"></input-knob>
<input-range min="1" max="10" step="any"></input-range>
<input-range orientation="v" min="10" max="20" step="2" value="12"></input-range>
<input-toggle>toggle</input-toggle>
<input-vector min="5" max="10"></input-vector>
<meter-marker min="0" max="1" start="0" end="0.5"></meter-marker>
<meter-marker type="knob" min="0.1" max="0.9" start="0"></meter-marker>
<meter-marker orientation="v" type="range" min="0" max=".5" start="0" end=".5"></meter-marker>
</section>
<script type="module">
import './lib/index';
document.querySelector('section').addEventListener('INPUT', (evt) => {
console.log('[input]:', evt.target.tagName, evt.target.value);
});
document.querySelector('input-button').addEventListener('INPUT', (evt) => {
document.querySelector('input-range').value = 10;
document.querySelector('input-vector').value = [0, 10];
});
const meters = document.querySelectorAll('meter-marker');
document.querySelector('input-range').addEventListener('INPUT', (evt) => {
meters.forEach(meter => {
meter.end = event.detail.percent
});
});
</script>
</body>
</html>