Display Output value on HTML Form Input Range - not working?

Question

I have a HTML form featuring an Input Range that I am using so a user can set their age between 18 to 100.

The input range displays fine. However I want the output value to be shown to the user as they are sliding the range up/down.

I figured the best way to do this was with CSS/Jquery.

My problem is that no out put values are being displayed. Please can someone show me where I am going wrong?

My HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="container">
    <div class="about_edit">
        <h3>About Me</h3>
        <form action="" method="post" name="edit">

            <label>Age</label>
            <input type="range" id="start" name="age" min="18" max="100">
            <output for="age" onforminput="value = age.valueAsNumber;"></output>

            <input name="submit" type="submit" value="Login" />
        </form>
    </div>
</div>

On the same page I have my Jquery:

<script>
    // DOM Ready
$(function() {
 var el, newPoint, newPlace, offset;

 // Select all range inputs, watch for change
 $("input[type='range']").change(function() {

   // Cache this for efficiency
   el = $(this);

   // Measure width of range input
   width = el.width();

   // Figure out placement percentage between left and right of input
   newPoint = (el.val() - el.attr("min")) / (el.attr("max") - el.attr("min"));

   // Janky value to get pointer to line up better
   offset = -1.3;

   // Prevent bubble from going beyond left or right (unsupported browsers)
   if (newPoint < 0) { newPlace = 0; }
   else if (newPoint > 1) { newPlace = width; }
   else { newPlace = width * newPoint + offset; offset -= newPoint; }

   // Move bubble
   el
     .next("output")
     .css({
       left: newPlace,
       marginLeft: offset + "%"
     })
     .text(el.val());
 })
 // Fake a change to position bubble at page load
 .trigger('change');
});
</script>

<script>
    var minValue, maxValue;
if (!el.attr("min")) { minValue = 0; } else { minValue = el.attr("min"); }
</script>

Then I have My CSS:

<style>
.about_edit{
    border-bottom:1px solid #ccc;
} 

label {
  width: 140px;
  text-align: left;
  margin-top:20px;

}

input {
  width: 100%;
  padding:5px;
  margin: 8px 0;
  box-sizing: border-box;
}

.edit {
  width: 100%;
  height:35px;
  margin:0 auto;
  box-sizing: border-box;
  line-height: 20px;
  padding:10px;

}


output { 
  position: absolute;
  background-image: linear-gradient(top, #444444, #999999);
  width: 40px; 
  height: 30px; 
  text-align: center; 
  color: white; 
  border-radius: 10px; 
  display: inline-block; 
  font: bold 15px/30px Georgia;
  bottom: 175%;
  left: 0;
  margin-left: -1%;
}
output:after { 
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid #999999;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  margin-top: -1px;
}
</style>

That is a CSS Tricks example... But you may be tempted by a Materialize slider which works better and nicer. — Louys Patrice Bessette
– Louys Patrice Bessette, Commented Mar 14, 2019 at 21:14

Michael Cacciano · Accepted Answer · 2019-03-14 20:47:17Z

2

ok so you can do this with pure html if I understand what you're trying to do properly. this code snippet works with the range and I'll try to explain where you're going wrong

<form action="" method="post" name="edit" oninput="age_output.value=parseInt(age.value);">

    <label>Age</label>
    18<input type="range" id="start" name="age" min="18" max="100" />100
    <output name="age_output" for="start" ></output>

</form>

remove the onforminput from the <output> to the form itself and rename it oninput
the name attributes are what you want to put in the oninput event on the form
the 18 and 100 before and after the input are just visual aids to know the min and max range
the for in <output> works with the id from input not the name

hope this helped and if not try this link https://www.w3schools.com/tags/tag_output.asp

answered Mar 14, 2019 at 20:47

Michael Cacciano

3991 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

M. Obren Over a year ago

thank you for this but i'm completely lost by your explanation.

Michael Cacciano Over a year ago

sorry if it is confusing. you want the oninput event to be on the form instead of the output tag since the form is where the input event is actually happening. when you use the for='age' in <output>, it should actually be for='start', since start is the id of <input> tag so it knows what it is linked to. In the oninput event in the <form>, when you use age_output.value and age.value you are essentially saying value of the output tag = parseInt(value of the input tag). both of these values are obtained by using the name attribute of the associated tags

Louys Patrice Bessette · Accepted Answer · 2019-03-14 21:35:39Z

Here is a range tooltip achieved with Materialize...

I think is way simplier and much cuter than the CSS Tricks example you tried...

$(document).ready(function() {
  $("#start").range();
});

input {
  width: 100%;
  padding:5px;
  margin: 8px 0;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

<div class="container">
  <div class="about_edit">
    <h3>About Me</h3>
    <form action="" method="post" name="edit">

      <label>Age</label>
      <p class="range-field">
        <input type="range" id="start" name="age" min="18" max="100">
      </p>

      <input name="submit" type="submit" value="Login" />
    </form>
  </div>
</div>

Manny Adumbire · Accepted Answer · 2019-03-14 21:29:32Z

0

As far as I can see, the main culprit here is that you are using the .text() function on the input slider element rather than the label or on some other text-containing element. Try this:

        $('label').text("Age: "+el.val());

Also I would suggest listening on "input" event rather than on "change" event. According to JQuery.com:

"change fires for input, select, and textarea elements when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value."

Here's a working example with those changes: https://jsfiddle.net/m3gsfntq/2/

edited Mar 14, 2019 at 21:29

answered Mar 14, 2019 at 21:19

Manny Adumbire

3961 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Display Output value on HTML Form Input Range - not working?

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related