jQueryスライダーの範囲
https://stackoverflow.com/questions/348187
-
20-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
jQueryスライダーのrangeプロパティを使用して、ユーザーが不動産の価格帯を選択できる2つのハンドルをスライダーコントロールに表示しようとしています。私が持っているコードは：
$("#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ドルです。スライダーのハンドルをスライドすると、<！> quot; 690から13 <！> quot;などの異常な値が表示されます。ダブルハンドルスライダーはどのくらい正確に機能するのですか？
解決
ダブルハンドルスライダーのスライダーハンドル値にアクセスするには、 slider（<！> quot; value <！> quot ;, 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>
わずかな修正。ダブルスライダーの場合、slide（ 'value'、n）ではなく、slider（ 'values'、n）を呼び出す必要があります。
次の代わりに別のわずかな修正：
$("#price").slider("moveTo", 500000, 1);
次のコードを試して、2番目のスライダーハンドラーを最大値に設定できるようにします。
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>
所属していません StackOverflow
