在HTML和JavaScript中添加两种不同类型的滑块

Question

I initially have one type of slider already present in my code to switch on/off my device, I wish to add another range slider to vary duration of ON time but when I do so all my slider turn to range slider, is there some other way to do so, since I'm using both HTML and JavaScript to fetch the user input and let the device act accordingly.

This is my slider code:

 .switch { position: relative; display: inline-block; width: 100px; height: 34px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: green; } input:focus+.slider { box-shadow: 0 0 1px green; } input:checked+.slider:before { -webkit-transform: translateX(66px); -ms-transform: translateX(66px); transform: translateX(66px); } .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 200; } /* this is another slider which i wish to add: */ .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; } 

 <tr height=40> <td> <style="text-align:middle">PORT1</td> <td width=40></td> <td><label id="sw1" , class="switch"> <input type="checkbox"> <span class="slider"></span> </label></td> <td> <div class="slidercontainer"> <input type="range" min="10" max="120" value="20" class="slider" id="pulse_time"> <p>Time:<span id="P1_PT"></span></p> </div> </td> </tr> 

Answer 1

you can do this to show slider if first is checked, you'll need to review css

 function changeVisibility(e) { if (e.target.checked) { document.getElementById("onlyShowIfYes").style.visibility = "visible" } else { document.getElementById("onlyShowIfYes").style.visibility = "hidden" } } document.getElementById("check").onchange = changeVisibility changeVisibility({target: {checked: false}}) 

 .switch { position: relative; display: inline-block; width: 100px; height: 34px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; -webkit-transition: .4s; transition: .4s; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input:checked+.slider { background-color: green; } input:focus+.slider { box-shadow: 0 0 1px green; } input:checked+.slider:before { -webkit-transform: translateX(66px); -ms-transform: translateX(66px); transform: translateX(66px); } .button { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; width: 200; } /* this is another slider which i wish to add: */ .slidecontainer { width: 100%; } .slider { -webkit-appearance: none; width: 100%; height: 15px; border-radius: 5px; background: #d3d3d3; outline: none; opacity: 0.7; -webkit-transition: .2s; transition: opacity .2s; } .slider:hover { opacity: 1; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; } .slider::-moz-range-thumb { width: 25px; height: 25px; border-radius: 50%; background: #4CAF50; cursor: pointer; } 

 <tr height=40> <td> <style="text-align:middle">PORT1</td> <td width=40></td> <td><label id="sw1" , class="switch"> <input id="check" type="checkbox"> <span class="slider"></span> </label></td> <td> <div id="onlyShowIfYes" class="slidercontainer"> <input type="range" min="10" max="120" value="20" class="slider" id="pulse_time"> <p>Time:<span id="P1_PT"></span></p> </div> </td> </tr>