JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<div class="inp3">
        <label>Зуммер:</label>             
        <div class="inp4">
            <div class="value">0</div>
                <input id="myRange" type="range" min="0" max="100" step="1" value="0" oninput="rangeValue()">
            </div>
            <input type="checkbox" id="payt3" onclick=" ActCheck.call(this)"  name="zumer" /><label for="payt3">ON</label>
    </div>

CSS

@media (min-width: 960px) { /* Стиль для отображения в телефоне */ 
html,body {
    zoom: 100% 
    background-color: #696969;
    font-family:'Times New Roman',Times,serif;
    overflow-x: hidden; }  
}@media screen { /* Стиль для отображения на мониторе */   
html,body {
    zoom: 80%;
    background-color: #696969;
    font-family:'Times New Roman',Times,serif;
    overflow-x: hidden; }  
}
label {    
    margin-left: 1.5%; 
    font-size:300%;     
}
input[type=checkbox]{
display: none;
}
.inp3{    
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}
.inp4{    
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}
.value {  
  text-align: center;
  font-weight: bold;
  font-size: 5em;
  width: 300px; 
  height: 100px;
  line-height: 60px; 
  letter-spacing: -.07em;
  text-shadow: white 2px 2px 2px;
  padding-top: 3%;
}
input[type="range"] {
  display: block;
  -webkit-appearance: none;
  background-color: #bdc3c7;
  width: 300px;
  height: 5px;
  border-radius: 5px;
  margin: 0 auto;
  outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #ffffff;
  width: 30px;
  height: 60px;
  border-radius: 20%;
  border: 2px solid white;
  cursor: pointer;
  transition: .3s ease-in-out;
}
  input[type="range"]::-webkit-slider-thumb:hover {
    background-color: white;
    border: 2px solid #e74c3c;
  }
  input[type="range"]::-webkit-slider-thumb:active {
    transform: scale(1.6);
  }
.payt {display: none;}
[for="payt1"],[for="payt2"],[for="payt3"],[for="payt4"],[for="payt5"],[for="payt6"] {
  position: relative;
  display: block;
  width: 165px;
  height: 12px;
  padding: 25px;
  border-radius: 50px;
  line-height: 15px;
  color: #31b3ff;
  text-shadow: 1px 1px 0px rgba(255,255,255,.15);
  background: rgb(71, 71, 71);
  box-shadow:
       0 1px 0 rgba(255,255,255,.2),
       inset 0 0 0 5px rgb(60, 60, 60),
       inset 0...

JavaScript

function ActCheck(e){
  console.log(this)
  var chbox=document.getElementById('payt3'); 
      document.getElementById('myRange').disabled = chbox.checked
}