css - noUiSlider 中句柄的左位置属性

Question

我试图在滑动时获取 noUiSlider 的 div 句柄的当前左属性值。但我总是得到它的初始左属性值。

$(document).ready(function() {
  var slider = document.getElementById('slider');

  noUiSlider.create(slider, {
    start: [1],
    connect: true,
    range: {
      'min': 0,
      'max': 10
    }
  });

  slider.noUiSlider.on('slide', function() {
    var handle = $("div.noUi-handle");
    $(leftPosition).text(($(handle).position().left));
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.0.0/nouislider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.0.0/nouislider.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="slider">
</div>
<div id="leftPosition"></div>

Answer 1

slide 事件有 5 个参数:values, handle, unencoded, tap, positions。

第 5 个 positions 参数包含左边的位置，以百分比表示。