4 个滑块值的平均值

Question

我正在尝试获取 4 个简单输入滑块的平均值。我想在文本字段中显示平均值。我很确定我需要使用 javascript/jquery。但我不是很熟悉它，所以我可能需要一些帮助。我很确定它非常简单，但我不知道我应该使用哪个事件处理程序等。

我有 4 个这样的滑块：

<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="3" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>

如有任何帮助，我将不胜感激。

Answer 1

试试这个

$(".slider").change( function(e){
    var b=0;
    $('.slider').each(function(){
      var a=parseInt($(this).val());
      b=b+a;
    });
   var avg=b/4;
    $('#textValue').val(avg);
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Result  - <input type="text" id="textValue" />
<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="3" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>
<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="4" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>
<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="3" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>
<div class="holder-left">
    <p>Subjektiv eller objektiv?</p>
    <input class="slider" type="range" min="1" max="5" value="5" />
    <div class="left">Subjektiv</div>
    <div class="right">Objektiv</div>
</div>

4 个滑块值的平均值

Average of 4 slider values

html

javascript

jquery

input

slider