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>

Answer 1

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>

Answer 2

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/

Answer 3

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>

1. remove the onforminput from the <output> to the form itself and rename it oninput
2. the name attributes are what you want to put in the oninput event on the form
3. the 18 and 100 before and after the input are just visual aids to know the min and max range
4. 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