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:
@ -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>
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
Reference in New Issue
Block a user