Jquery 在HTML表单输入范围上显示输出值-不工作？

我有一个HTML表单，上面有我正在使用的输入范围，因此用户可以将他们的年龄设置在18到100岁之间

输入范围显示良好。但是，我希望在用户向上/向下滑动范围时向用户显示输出值

我认为最好的方法是使用CSS/Jquery

我的问题是没有显示输出值。有人能告诉我哪里出了问题吗

我的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>

在同一页上，我有我的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>

然后我有我的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>

---

好的，如果我理解你想做什么，你可以用纯html来做。此代码段适用于范围，我将尝试解释您的错误所在

<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>

从中删除onforminput并将其重命名为oninput name属性是要在表单的oninput事件中放置的内容 输入前后的18和100只是了解最小和最大范围的视觉辅助工具 for使用输入中的id而不是名称

---

希望这有帮助，如果没有尝试此链接

据我所知，这里的罪魁祸首是在输入滑块元素上使用.text函数，而不是在标签或其他包含文本的元素上。试试这个：

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

我还建议听输入事件而不是变化事件。 据JQuery.com称：

当用户提交对元素值的更改时，change会激发input、select和textarea元素。与输入事件不同，元素值的每次更改都不一定触发更改事件

下面是一个具有这些更改的工作示例：

---

这是一个使用

我认为这比你尝试过的更简单更可爱

$document.readyfunction{ $start.range； }; 输入{ 宽度：100%； 填充物：5px； 利润率：8px0； 框大小：边框框； } 关于我 年龄

---

谢谢你的解释，但我完全听不懂你的解释。如果让人困惑的话，很抱歉。您希望oninput事件位于表单上，而不是output标记上，因为表单是输入事件实际发生的位置。在中使用for='age'时，它实际上应该是for='start'，因为start是标记的id，所以它知道它链接到什么。在中的oninput事件中，当使用age_output.value和age.value时，实际上是说输出标记的值=输入标记的parseIntvalue。这两个值都是通过使用关联标记的name属性获得的，该标记是。。。但你可能会被一种更好更好的方法所诱惑。