我想使用jQuery滑塊的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」。雙柄滑塊究竟是如何工作的？
要訪問雙處理滑塊中的滑塊句柄值，您需要從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);
});
輕微更正。您需要爲雙滑塊調用slider（'values'，n）而不是slide（'value'，n）。
另一個輕微修正，代替：
$("#price").slider("moveTo", 500000, 1);
嘗試下面的代碼，以便能夠設置在第二滑動件處理程序來的最大值;
var max = $('#price').slider('option', 'max');
$("#price").slider('values' , 1 , max);
<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" />
</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>
<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>
感謝，出色的作品。我只是希望這是一個很好的例子（在此之前）。 – Craig 2008-12-07 23:11:14