Alberto Rivera
Alberto Rivera
Programming language:Javascript
2021-06-15 16:06:41
0
Q:

how to make a range slider button do different functions in java script

kamil
kamil
Code: Javascript
2021-02-21 21:43:46 
<input type="range" id="rangeInput" name="rangeInput" min="0" max="20" value="0"
       oninput="amount.value=rangeInput.value">                                                       

<output id="amount" name="amount" for="rangeInput">0</output>
3
Guygar
Guygar
Code: Javascript
2021-06-11 01:38:43 
<input type="range" min="1" max="1000" value="1000" id="slidebar">
<p id="the_value"></p>
3
Iam Pyre
Iam Pyre
Code: Javascript
2021-02-21 21:42:06 
<!DOCTYPE html> 
<html> 
<style> 
  
.rangeslider{ 
    width: 50%; 
} 
  
.myslider { 
    -webkit-appearance: none; 
    background: #FCF3CF  ; 
    width: 50%; 
    height: 20px; 
    opacity: 2; 
   } 
  
  
.myslider::-webkit-slider-thumb { 
    -webkit-appearance: none; 
    cursor: pointer; 
    background: #34495E  ; 
    width: 5%; 
    height: 20px; 
} 
  
  
.myslider:hover { 
    opacity: 1; 
} 
  
</style> 
<body> 
  
<h1>Example of Range Slider Using Javascript</h1> 
<p>Use the slider to increment or decrement value.</p> 
  
<div class="rangeslider"> 
  <input type="range" min="1" max="100" value="10"
                  class="myslider" id="sliderRange"> 
  <p>Value: <span id="demo"></span></p> 
</div> 
  
<script> 
var rangeslider = document.getElementById("sliderRange"); 
var output = document.getElementById("demo"); 
output.innerHTML = rangeslider.value; 
  
rangeslider.oninput = function() { 
  output.innerHTML = this.value; 
} 
</script> 
  
</body> 
</html>
1

Tags

Related

New to Communities?

Join the community