title: Adding two different types of slider in HTML and JavaScript
body: <p>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.</p>
  
  <p>This is my slider code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;tr height=40&gt;
    &lt;td&gt;
      &lt;style="text-align:middle"&gt;PORT1&lt;/td&gt;
    &lt;td width=40&gt;&lt;/td&gt;
    &lt;td&gt;&lt;label id="sw1" , class="switch"&gt;
     &lt;input type="checkbox"&gt;
     &lt;span class="slider"&gt;&lt;/span&gt; 
     &lt;/label&gt;&lt;/td&gt;
    &lt;td&gt;
      &lt;div class="slidercontainer"&gt;
        &lt;input type="range" min="10" max="120" value="20" class="slider" id="pulse_time"&gt;
        &lt;p&gt;Time:&lt;span id="P1_PT"&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
    &lt;/td&gt;
  &lt;/tr&gt;</code></pre>
  </div>
  </div>
  </p>