Question

我已经制作了这个滑块，它应该显示最后的值，但是当我滑动滑块时，该值不会改变...在控制台中我得到的错误滑块未定义。

$("#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

我认为你对Image Slider和Range Slider感到困惑。仅在“图像”滑块上，您可以捕获事件.on('slide'。在Range幻灯片中，您必须像.on('input'一样使用并分配当前滑块值，如下所示。也不需要使用$('#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>

Answer 2

滑块不会在您的情况下触发幻灯片事件，您可以使用输入事件：

＆＃13;

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

＆＃13;

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.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>

＆＃13;

此外，Slider不是基本jQuery库的组件，您需要将jQueryUI添加到项目中。您可以下载here。小心将添加到 jQuery之后。还要确保你有一个CSS主题。

我的jquery滑块没有显示值

2 个答案: