如何从jQuery范围滑块获取值

Question

I'm using ui jquery slider, but i'm not able to get the value.

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

Can anyone help me with this?

Answer 1

Your issue is because you're instantiating the slider() on a input type="range" element. It should be used with a plain div . Change that and the rest of your code works fine:

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

The slider documentation has full explanations of all other methods and properties you can use.

Answer 2

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

您可以尝试这个（y）