39 lines
1.2 KiB
HTML
39 lines
1.2 KiB
HTML
|
<div class="VolumeSlider">
|
||
|
|
<input type="range" min="0" max="255" class="slider" id="channel1" >
|
||
|
|
</div>
|
||
|
|
<div class="VolumeSlider">
|
||
|
|
<input type="range" min="0" max="255" class="slider" id="channel2" >
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p>channel 1: <span id="channel1val"></span></p>
|
||
|
|
<p>channel 2: <span id="channel2val"></span></p>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var ch1 = document.getElementById("channel1");
|
||
|
|
var ch2 = document.getElementById("channel2");
|
||
|
|
var ch1val = document.getElementById("channel1val");
|
||
|
|
var ch2val = document.getElementById("channel2val");
|
||
|
|
ch1val.innerHTML = ch1.value;
|
||
|
|
ch2val.innerHTML = ch2.value;
|
||
|
|
|
||
|
|
window.onload = async function() {
|
||
|
|
const response = await fetch("volume");
|
||
|
|
channels = await response.json();
|
||
|
|
console.log(channels);
|
||
|
|
ch1.value = channels["channel1"];
|
||
|
|
ch2.value = channels["channel2"];
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
ch1.oninput = function() {
|
||
|
|
ch1val.innerHTML = this.value;
|
||
|
|
var newUrl = "volume?channel=1&value="+this.value.toString();
|
||
|
|
fetch(newUrl);
|
||
|
|
}
|
||
|
|
ch2.oninput = function() {
|
||
|
|
ch2val.innerHTML = this.value;
|
||
|
|
var newUrl = "volume?channel=2&value="+this.value.toString();
|
||
|
|
fetch(newUrl);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|