onlyforbopi
9/22/2018 - 7:34 AM

JS.Events.Validation.Input.SliderImplement

JS.Events.Validation.Input.SliderImplement

script.js
content_copyfile_download
function doSomething(evt) {
  // this is the slider value
  var val = evt.target.value;  
  
  // get the output div
  var output = document.querySelector('#sliderValue');
  // display the value typed in the div 
  output.innerHTML = "Value selected: " + val;
}
js-events-validation-input-sliderimplement.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Events.Validation.Input.SliderImplement

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JavaScript slider use</title>
</head>
<body>
  <h1>Simple <code>&lt;input type=range&gt;</code> field validation using the 'input' event</h1>
  <p>Just move the slider</p>
<label>
 1 <input type="range" 
         min=1
         max=12
          step=0.1
         oninput = "doSomething(event)"> 12
</label>
  <p>
  <span id="sliderValue"></span>
</p>  
</body>
</html>