WHSPAH/WHSPAH-Web-Interface
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated slider value visuals to use their own ID, styles.css updated to make sliders bigger and more user friendly.

Browse Source
This commit is contained in:
Tango
2026-06-02 17:46:14 +01:00
parent 0f946fa8b0
commit 57bfd63126
2 changed files with 11 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
www/index.html
View File

@ -20,13 +20,15 @@
<h2>LucalEncoded?</h2> <h2>LucalEncoded?</h2>
<input type="checkbox" id="lucalEncodedInput"> <input type="checkbox" id="lucalEncodedInput">
<h2>Shock</h2> <h2>Shock</h2>
<input type="range" min="0" max="99" id="shockIntensity" oninput="this.nextElementSibling.value = this.value"> <input type="range" min="0" max="99" id="shockIntensity" oninput="document.getElementById('sliderValueFirst').value = this.value" class="sliderInput">
<output>0</output> <br>
<output id="sliderValueFirst">0</output>
<br> <br>
<button onclick="shock();">Shock!</button> <button onclick="shock();">Shock!</button>
<h2>Vibrate</h2> <h2>Vibrate</h2>
<input type="range" min="0" max="99" id="vibrateIntensity" oninput="this.nextElementSibling.value = this.value"> <input type="range" min="0" max="99" id="vibrateIntensity" oninput="document.getElementById('sliderValueSecond').value = this.value" class="sliderInput">
<output>0</output> <br>
<output id="sliderValueSecond">0</output>
<br> <br>
<button onclick="vibrate();">Vibrate!</button> <button onclick="vibrate();">Vibrate!</button>
</div> </div>

5
www/styles.css
View File

@ -12,6 +12,7 @@ body {
margin-bottom: 1%; margin-bottom: 1%;
padding: 1%; padding: 1%;
border-radius: 25px; border-radius: 25px;
max-width: 100vw;
} }
.contentBox{ .contentBox{
@ -23,4 +24,8 @@ body {
padding: 1%; padding: 1%;
border-radius: 25px; border-radius: 25px;
max-width: 80%; max-width: 80%;
}
.sliderInput{
width: 90%;
} }