Диапазон слайдеров jQuery

Question

Я пытаюсь использовать свойство range ползунка jQuery, чтобы элемент управления ползунка отображал две ручки, из которых пользователь может выбрать диапазон цен для недвижимости. Код у меня есть:

$("#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 до 2 000 000 долларов США. Когда я перемещаю ручки на ползунке, я получаю необычные значения, такие как «690 - 13». Как именно работает слайдер с двойной ручкой?

Answer 1

Чтобы получить доступ к значениям дескриптора ползунка в ползунке с двойной обработкой, вам нужно получить к ним доступ с помощью ползунка («значение», индекс) . Попробуйте следующий код:

$(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);
  });

Answer 2

<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]];
});



</script>

in  html
<div id="Priceslider" class="demo" style="margin-top:5px; " >
                        <%--<Triggers>
                                <asp:AsyncPostBackTrigger ControlID="Chk1"  />

                                </Triggers>--%>
                        <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>


 <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            AllowPaging="True" PageSize="5" Width="555px" 
            onpageindexchanging="GridView1_PageIndexChanging">
    <Columns>
    <asp:TemplateField>
    <ItemTemplate>
    <div  class="propertyName">
           <asp:CheckBox ID="chkProperty" runat="server" Text='<%# Eval("PropertyName") %>' />,
        <asp:Label ID="lblLocation" runat="server" Text='<%# Eval("PropertyLocality") %>'></asp:Label>,
        <asp:Label ID="lblCity" runat="server" Text='<%# Eval("CityName") %>'></asp:Label>
        </div>

    <div class="property-image">
        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("PhotoPath") %>' Height="100" Width="100" />
               &nbsp;
        </div>

    <div>
    <div style="float: left; width: 380px; margin: 10px; border: thin solid black;">
            <div style="height: 80px; width: 80px; border: 1px solid; float: right; margin-top: 10px; margin-right: 10px;">
                <font size="2">Weekdays Price:<span id="weekdayPrice6"><%# Eval("WeekdayPrice")%></span></font><br>
                <font size="2">Weekend Price: <span id="weekendPrice6"><%# Eval("WeekendPrice")%></span></font><br>
                <input name="getamt" value="Get your amount" style="font-size: 8px;" type="button">
            </div>

            <div style="float: right; width: 280px;">
                <input name="Map" value="Map" onclick="showPropertyMap(6)" type="button">
                <input name="availability" value="Check Availability" onclick="showPropertyAvailabilityCalender(6)" type="button"><br>

                Ratings : <img src="images/star<%# Eval("PropertyRating") %>.PNG" alt="'<%# Eval("PropertyRating") %>'"/> (Votes : <span></span>)

                    <br>

                View <span></span> times, <span>
                    <asp:Label ID="Label1" runat="server" Text='<%# Eval("NumberOfReviews") %>'></asp:Label></span> Reviews<br>

                <span></span><%# Eval("PropertyRecommended")%> % Recommend<br>
                Check in <%# Eval("CheckinTime") %> Check out <%# Eval("CheckoutTime")%><br>
                <div id='<%# Eval("PropertyId") %>' class="property">
               <%-- <input name="Book" value="Book" type="button">--%>
               <asp:Button ID="Book" runat="server" Text="Book" 
                        OnClientClick="return retrivPropertyId(this);" onclick="Book_Click"/>
                <input name="Save" value="Save" type="button">
                 <input name="Details" value="Details" type="button" onclick="return retreivePId(this);">

                <asp:Button ID="Contact" runat="server" Text="Contact" 
                        OnClientClick="return retreivePropId(this);" onclick="Contact_Click" />
                <br>
                </div> 
            </div>
        </div>

    </div>
    </ItemTemplate>
    </asp:TemplateField>
    </Columns>
    </asp:GridView>

Answer 3

<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>

Answer 4

другая небольшая коррекция вместо:

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

попробуйте следующий код, чтобы установить для второго обработчика ползунка максимальное значение;

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

Answer 5

Небольшая коррекция. Для двойного слайдера вам нужно вызывать слайдер ('values', n), а не слайд ('value', n).