jQuery स्लाइडर रेंज

Question

मैं 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

एक डबल संभाला स्लाइडर आप slider("value", index) समारोह से उन तक पहुंच की जरूरत है स्लाइडर संभाल मूल्यों पर पहुंचने के लिए। निम्न कोड आज़माएं:

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

थोड़ा सुधार। आपको डबल स्लाइडर के लिए स्लाइडर ('मान', एन) स्लाइड ('मान', एन) को कॉल करने की आवश्यकता नहीं है।

Answer 3

एक और मामूली सुधार के बजाय:

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

अधिकतम मूल्य से पीछे नहीं स्लाइडर हैंडलर सेट करने के लिए सक्षम होने के लिए निम्नलिखित कोड की कोशिश;

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>