Rango del control deslizante jQuery

Question

Estoy tratando de usar la propiedad de rango del control deslizante jQuery para que el control deslizante muestre dos controles desde los cuales el usuario puede seleccionar un rango de precio para bienes inmuebles. El código que tengo es:

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

El rango de precio debe ser de $ 0 a $ 2,000,000. Cuando deslizo las manijas en el deslizador, obtengo valores inusuales como "690 a 13". ¿Cómo funciona exactamente el control deslizante de doble asa?

Answer 1

Para acceder a los valores del controlador del control deslizante en un control deslizante con doble control, debe acceder a ellos desde la función slider("value", index). Pruebe el siguiente código:

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

Corrección leve. Debe llamar al control deslizante ('valores', n) no deslizar ('valor', n) para un deslizador doble.

Answer 3

otra ligera corrección, en lugar de:

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

tratar el siguiente código para poder ajustar el segundo controlador regulador al valor máximo;

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>