如何從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> 

誰能幫我這個？

Answer 1

您的問題是因為您要在input type="range"元素上實例化slider() 。 它應與普通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> 

滑塊文檔全面說明了您可以使用的所有其他方法和屬性。

Answer 2

 $('#ex1').slider("option", "value");

您可以嘗試這個（y）