oninput for range

UpdatedMay 11, 2021

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

Comments (1)

Join the discussion

Syed Fazle Rahman5y ago

Great tip! Anjanesh Lekshminarayanan

You can embed the CodePen here. It'll be easy to test the code here itself. :)

Follow this syntax:

%[codepen-url]

Anjanesh Lekshminarayanan5y ago

I tried it but it didn't work - does it require a % and the end too ?

Syed Fazle Rahman5y ago

No, it should expand into an embed in a few seconds Anjanesh. I tried it now and it worked.

Syed Fazle Rahman5y ago

Anjanesh oh, it has to be in a new line. It won’t work if it’s inlined inside paragraphs or sentences.

Anjanesh Lekshminarayanan5y ago

Got it - it's inserted / embedded - thanks. Syed Fazle Rahman

Syed Fazle Rahman5y ago

Yay! 🙌 Anjanesh

Anjanesh Lekshminarayanan5y ago

Syed Fazle Rahman - This is super ! - I just updated my other post which is 100% JavaScript with codepen embed too. Thanks.

Syed Fazle Rahman5y ago

I am glad my comment was helpful. 🙂Anjanesh

More from this blog

Email validity checker using Google's JSON API for DNS over HTTPS (DoH) in Google Sheets

Clean your email list even before sending it to a mass emailing solution like AutoSend to avoid a high bounce rate

Apr 21, 20263 min read18

Email validity checker using Google's JSON API for DNS over HTTPS (DoH) in Google Sheets

Getting picoclaw to work on Windows

Try using an alternative to openclaw, which they claim is cheaper to use

Feb 19, 20264 min read379

The core use-case of TypeScript

Using types (and interfaces) to define a blueprint of a variable

Jan 21, 20262 min read12

Hashnode's GraphQL API for RSS feeds

Using GraphQL as an alternative to REST API for Hashnode

Jan 21, 20261 min read17

make makemigrations work again

making makemigrations work in Django when migrations is not pushed to git

Mar 17, 20252 min read168

Anjanesh

69 posts

Web App Developer · Web UI Performance · Cloud newbie · Navi Mumbai · MentorCap

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>

https://codepen.io/anjanesh/pen/NWpGYjK

Command Palette

Comments (1)

More from this blog