我正在尝试使用 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”。双手柄滑块的具体工作原理是什么？
【问题讨论】：
标签： javascript jquery slider
要访问双柄滑块中的滑块句柄值，您需要从 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);
});
【讨论】：
<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>
【讨论】：
轻微修正。对于双滑块，您需要调用 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" 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>
【讨论】：
单滑块 - DEMO
https://codepen.io/ssuryar/pen/PoZEBgm
HTML
<div id="slider-range"></div>
CSS
.ui-draggable, .ui-droppable {
background-position: top;
}
.ui-widget-header {background: #006fba;}
.value { position: absolute; top: 30px; left: 50%; margin: 0 0 0 -20px; width: 40px; text-align: center; display: block; font-weight: normal;}
jQuery
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 0,
max: 500,
values: [ 75, 300 ],
slide: function( event, ui ) {
$('.ui-slider-handle:eq(0) .price-range-min').html('$' + ui.values[ 0 ]);
$('.ui-slider-handle:eq(1) .price-range-max').html('$' + ui.values[ 1 ]);
}
});
$('.ui-slider-handle:eq(0)').append('<span class="price-range-min value">$' + $('#slider-range').slider('values', 0) + '</span>');
$('.ui-slider-handle:eq(1)').append('<span class="price-range-max value">$' + $('#slider-range').slider('values', 1) + '</span>');
} );
【讨论】：