Javascript jQuery滑块范围

我试图使用jQuery滑块的range属性，以便滑块控件显示两个句柄，用户可以从中选择房地产的价格范围。我的密码是：

$("#price").slider({ range: true, minValue: 0, maxValue: 2000000,
  change:
  function(e, ui) {
    var range = (Math.round(ui.range) * 10) + " to " + ui.value;
    $("#pricedesc").text(range);
  } 
});

---

价格范围应为0美元至200万美元。当我滑动滑块上的手柄时，虽然我得到了不寻常的值，例如690到13。双手柄滑块的具体工作方式是什么？

要访问双手柄滑块中的滑块手柄值，需要从函数中访问它们。请尝试以下代码：

$(document).ready(function(){
    $("#price").slider(
      { range: true, 
        min: 0, 
        max: 2000000, 
        change: function(e,ui) { 
          alert($("#price").slider("value", 0) + ' - ' + $("#price").slider("value", 1) );
    }});
    $("#price").slider("moveTo", 500000, 1);
  });

---

轻微的修正。您需要调用滑块'values'，而不是slide'value'，n表示双滑块。

另一个轻微的更正，而不是：

$("#price").slider("moveTo", 500000, 1);

尝试以下代码，以便能够将第二个滑块处理程序设置为最大值

var max = $('#price').slider('option', 'max');
$("#price").slider( 'values' , 1 , max );

单滑块-

HTML

jQuery

$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
       $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
       $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
      }
    });
    $('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#slider-range').slider('values', 0) + '</span>');
    $('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#slider-range').slider('values', 1) + '</span>');
  } );

---

谢谢，效果很好。我只是希望在这之前有一个很好的例子。是的，很棒的答案。该链接上的页面也非常棒，非常有用，尽管示例有点小。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type="text/javascript">
    var str;
    $(function () {

        $("#slider-range").slider({
            range: true,
            min: 250,
            max: 2500,
            values: [500, 1000],
            slide: function (event, ui) {
                $("#amount").val('Rs' + ui.values[0] + ' - Rs' + ui.values[1]);
            }
        });
        $("#amount").val('Rs' + $("#slider-range").slider("values", 0) + ' - Rs' + $("#slider-range").slider("values", 1));
        //document.getElementById('valueofslide').value = arrIntervals[ui.values[1]];
    });

<div id="Priceslider" class="demo" style="margin-top:5px; " >

                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                    <asp:TextBox ID="amount" runat="server" 
                        style="border:0; color:#f6931f; font-weight:bold;margin-bottom:7px;" OnTextChanged="amount_TextChanged" AutoPostBack="True"></asp:TextBox>
                        </ContentTemplate> 
                    </asp:UpdatePanel>                                                        
                        <div id="slider-range"></div>  
                    <asp:TextBox ID="valueofslide" runat="server" AutoPostBack="True"></asp:TextBox>              
                </div>
</form>

<div id="slider-range"></div>

.ui-draggable, .ui-droppable {
    background-position: top;
}
.ui-widget-header {background: #006fba;}
.value {    position: absolute;    top: 30px;    left: 50%;    margin: 0 0 0 -20px;    width: 40px;    text-align: center;    display: block;    font-weight: normal;}

$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 500,
      values: [ 75, 300 ],
      slide: function( event, ui ) {
       $('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
       $('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
      }
    });
    $('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#slider-range').slider('values', 0) + '</span>');
    $('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#slider-range').slider('values', 1) + '</span>');
  } );