Phạm vi thanh trượt jQuery

Question

Tôi đang cố gắng sử dụng thuộc tính phạm vi của thanh trượt jQuery để điều khiển thanh trượt hiển thị hai tay cầm mà từ đó người dùng có thể chọn phạm vi giá cho bất động sản. Mã tôi có là:

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

Phạm vi giá phải từ $ 0 đến $ 2,000,000. Khi tôi trượt các chốt trên thanh trượt mặc dù tôi nhận được các giá trị bất thường như "690 đến 13". Thanh trượt xử lý kép có ý nghĩa như thế nào để hoạt động?

Answer 1

Để truy cập các giá trị xử lý thanh trượt trong thanh trượt được xử lý hai lần, bạn cần truy cập chúng từ hàm slider("value", index). Hãy thử mã sau:

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

Chỉnh sửa nhẹ. Bạn cần phải gọi thanh trượt ('values', n) không trượt ('value', n) cho một thanh trượt kép.

Answer 3

điều chỉnh nhẹ khác, thay vì:

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

thử đoạn mã sau để có thể thiết lập các điều khiển thanh trượt thứ hai với giá trị tối đa;

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

Answer 4

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

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