range.html

<link href="https://fonts.googleapis.com/css?family=Press+Start+2P&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<style>
    body{font-family: 'Press Start 2P', cursive;
    background: url(https://sun9-19.userapi.com/c857320/v857320711/7ed5a/7QxD2LLY0DM.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 0%;
}
.range{
    -webkit-appearance: none;
    border-radius: 2px;
    width: 600px;
    height: 10px;
    outline: none;
    background-color: #f1f1f1;
    background:#eee;
}
.range::-webkit-slider-thumb{
    -webkit-appearance: none;
    width:18px;
    height:18px;
    background:#D4D4D4;
    border-radius:18px;
    cursor:pointer;
    transition:.1s;
}</style>
<center>
        <div class="onf" style="position:relative;top:270px;transition: all 1s ease 0s;">насосы</div>
        <div class="val" style="position:relative;top:285px;color: white;"></div>
        <div class="inputs" style="position: relative;top:300px;">
        <input type="range" class="range" min="0" max="100" value="0" step="1" id="calc_l_m_range" oninput="range()">
</div>
</center>

<script>
    
    $(document).ready(function(){
  $(".onf").toggle(
    function(){$(".onf").html('насосы включены').css({"color": "green"});},
    function(){$(".onf").html('насосы выключены').css({"color": "red"});
  });
});
    

        function range(){
            var val = $('.range').val();$('.val').html(val+'%');
            $('.range').css({'background-image':'-webkit-linear-gradient(left ,#505050 0%,#9e9e9e '+val+'%,#E0E0E0 '+val+'%, #fff 100%)'});
         }
        
        </script>