ionRangeSlider - 获取隐藏表单输入字段的范围值

Question

如何使用jquery在隐藏的输入字段中显示范围值 范围代码

$("#range").ionRangeSlider({
  grid: true,
  from: 1,
  to: 6,
  values: [
    "", "Tenth",
    "Diploma", "Twelth", "Graduate",
    "PostGraduate", "P.hd"
  ]
});

<input type="range" id="range" value="" name="range" />

显示隐藏的输入

<input type="hidden" id="f4" />

Answer 1

您需要使用onChange事件，并且我假设您要将值设置为您需要使用"Tenth","Diploma","Twelth", "Graduate","PostGraduate","P.hd"的文本值（data.from_value）： -

$("#range").ionRangeSlider({
  grid: true,
  from: 1,
  to: 6,
  values: [
    "", "Tenth",
    "Diploma", "Twelth", "Graduate",
    "PostGraduate", "P.hd"
  ],
  onChange: function(data) {
    alert(data.from_value);

    $('#f4').val(data.from_value);
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.skinFlat.css" rel="stylesheet" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/css/ion.rangeSlider.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.min.js"></script>

<input type="range" id="range" value="" name="range" />

<input type="hidden" id="f4" />