Jquery在改变时获取滑块值

Question

我有一个滑块问题，在拖动滑块时它应该给我恒定的值。

我的html代码如下：

<div class="dimmer">
      <div class="intensity-slider">
        <!--<label for="fader">INTENSITY</label>-->
        <input type="range" min="0" max="100" value="80" class="vertical" orient="vertical" id="fader" step="1" oninput="outputUpdate(value)">
        <output class="output" for="fader" id="intensity">80</output>
        <script>

          function outputUpdate(int) {
          document.querySelector('#intensity').value = int;
          }
        </script>
      </div>
      <div class="blackout">
        <a ontouchstart="" href="#" id="blackout">BO</a>
      </div>
  </div>

现在，我有了输出类强度，并且在拖动滑块时它会得到更新。

我现在需要获取这个值来更新我的 jQuery consolelog。

这是我的JavaScript代码：

$( "#fader" ).mousedown(function(value) {
    console.log(document.querySelector('#intensity').value);
});

控制台正确记录该值，但我不是在整个拖动过程中获取流，而是获取按下时的值。

如何解决这个问题？

Answer 1

使用此代码，我相信您将实现您想要的目标：

$('#fader').change(function(event) {
    console.log(document.querySelector('#intensity').value);
});

当您滑动滑块时，滑块会为您提供一个值。滑动时，它会触发该事件。change

更新

您可以使用该on('slide')方法来了解滑动时每个点的值。

$('#fader').on('slide', function(event, ui) {
    console.log(ui.value);
});

以下是有关该on('slide')活动的一些详细信息：

slide( event, ui )

滑动期间每次鼠标移动时触发。事件中提供的值ui.value表示手柄由于当前移动而具有的值。取消事件将阻止手柄移动并且手柄将继续具有其先前的值。

请参阅此JSFiddle了解更多详细信息。