javascript - 我的 jquery slider 不显示值

Question

我制作了这个 slider ，它应该在末尾显示值，但是当我滑动 slider 时，该值不会改变...在控制台中，我收到错误 slider 未定义。

$("#ex6").slider();
$("#ex6").on("slide", function(slideEvt) {
    $("#ex6SliderVal").text(slideEvt.value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer"> 
   <input type="range" min="1" max="6" value="1" class="slider" id="ex6"> <br>
   <span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal"></span></span>
</div>

Answer 1

我认为您对图像 slider 和范围 slider 感到困惑。仅在图像 slider 上，您可以捕获事件 .on('slide'。在范围幻灯片中，您必须使用 .on('input' ) 并分配当前 slider 值如下所示。也不需要使用 $('#ex6').slider()。

$('#ex6').on('input', function(){
    $('#ex6SliderVal').html(this.value);
}); 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div class="slidecontainer"> 
   <input type="range" min="1" max="6" value="1" class="slider" id="ex6"> <br>
   <span id="ex6CurrentSliderValLabel">Current Slider Value: <span id="ex6SliderVal"></span></span>
</div>