oninput for range

PublishedMay 11, 2021

•1 min read

I am a web developer from Navi Mumbai. Mainly dealt with LAMP stack, now into Django and getting into Laravel and Cloud. Founder of nerul.in and gaali.in

We often use onclick and onchange but here's a scenario where oninput is used to trigger a change in the range value.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>oninput range</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<script>
changeAge = (e) =>
{    
    document.getElementById('span_age').innerHTML = 
    document.getElementById('span_age_center').innerHTML = 
    e.target.value;
}
</script>
</head>
<body>
<div class="container mt-5">
  <div class="form-group row">
    <label for="age" class="col-sm-2 col-form-label">Age (<span id="span_age">10</span>)</label>
    <div class="col-sm-10 d-flex">
        <div style="width:20px">5</div>
        <input type="range" class="form-control-range" id="age" name="age" min="5" max="18" value="10" oninput="changeAge(event)" style="margin-top:-10px;" />
        <div class="text-center" style="width:30px">18</div>
    </div>
    <div class="col-sm-12 text-center">
        <span id="span_age_center">10</span>
    </div>
  </div>
</div>
</body>
</html>