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

This commit is contained in:
2026-06-02 17:46:14 +01:00
parent 0f946fa8b0
commit 57bfd63126
2 changed files with 11 additions and 4 deletions

View File

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

View File

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