Question

我有一个范围滑块，有两个范围。我想在我的javascript中获取此滑块的值。

这就是我所做的：

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>	
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">	
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script>
  
  $(function() {

	$("#find_match").click(function(){

      alert($('#amount').val(ui.values[ 0 ]));
      
  });  
  
    $(function() {
      $( "#slider-range" ).slider({
        range: true,
        min: 20,
        max: 60,
        values: [ 20, 30 ],
        slide: function( event, ui ) {
          $( "#amount" ).val( ui.values[ 0 ] + " - " + ui.values[ 1 ] );
        }
      });
      $( "#amount" ).val( $( "#slider-range" ).slider( "values", 0 ) +
                         " - " + $( "#slider-range" ).slider( "values", 1 ) );
    });
</script>


<body>
    <label for="amount">
        Age range:
    </label>
	<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
	<div id="slider-range"></div>
        <button id="find_match">Search matches </button>
</body>

＆＃13;

在onclick()我已经这样做了;但它没有成功。

它说＆＃34; ui没有被定义＆＃34;在上面的代码中。我希望单击按钮时上方滑块的值。怎么做？

注意：滑块未显示。

Answer 1

你应该在onclick函数中使用它：

var minAge = $('#amount').val();

来自documentation of .val()：如果没有参数，.val()将返回该项的值。如果显示一个参数，.val(value)将项的值设置为您提供的参数。

Answer 2

我假设你使用标准的jquery ui滑块。

API说http://api.jqueryui.com/slider/#option-values你只需要打电话：

 $("#find_match").click(function(){
    var minAge = $( "#slider-range" ).slider( "option", "values" )[0];
});

这是一个小提琴：

http://jsfiddle.net/Kbrqb/337/

Answer 3

如果您尝试获取#slider-range的值，可以使用attr()：

$("div").attr("$slider-range");

如何在点击按钮时获取滑块值？

3 个答案: