javascript - 如何从 jquery 范围滑块中获取值

Question

我正在使用 ui jquery 滑块，但我无法获得该值。

$("#ex1").slider({
  value: 1400,
  min: 1400,
  max: 12000,
  step: 20,
  slide: function(event, ui) {
    $("#slider-value").html(ui.value);
  }
});
$("#slider-value").html($('#ex1').slider('value'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />
<input id="ex1" data-slider-id='ex1Slider' type="range" data-slider-min="1400" data-slider-max="12000" data-slider-step="20" data-slider-value="0" /><b class="price-left">
<span id="slider-value"></span>

谁能帮我这个？

标签： javascriptjqueryhtml

Answer 1

您的问题是因为您正在实例化slider()一个input type="range"元素。它应该与普通的div. 改变它，你的代码的其余部分工作正常：

$("#ex1").slider({
  value: 1400,
  min: 1400,
  max: 12000,
  step: 20,
  slide: function(event, ui) {
    $("#slider-value").html(ui.value);
  }
});
$("#slider-value").html($('#ex1').slider('value'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" />

<div id="ex1" data-slider-id='ex1Slider' data-slider-min="1400" data-slider-max="12000" data-slider-step="20" data-slider-value="0"></div>
<span id="slider-value"></span>

滑块文档对您可以使用的所有其他方法和属性进行了完整说明。