我正在使用Range Slider的价格,基于滑块中的最小和最大价格我有显示产品...我希望重新加载页面有最小值和最大值,在Range滑块停止滑动后,但我的Jquery在每张幻灯片中重新加载。 ..但是在Range Slider停止滑动后重新加载页面
我的jQuery
<script type="text/javascript">
var amtmin, amtmax;
$(function () {
$("#slider-range").slider({
range: true,
min: 1,
max: 10,
values: [2, 8],
slide: function (event, ui) {
$("#amount").val("Rs. " + ui.values[0] + " - Rs. " + ui.values[1]);
amtmin = ui.values[0];
amtmax = ui.values[1];
}
});
$("#amount").val("Rs. " + $("#slider-range").slider("values", 0) + " - Rs. " + $("#slider-range").slider("values", 1));
amtmin = $("#slider-range").slider("values", 0);
amtmax = $("#slider-range").slider("values", 1);
});
//alert("Url : " + finalUrl);
if (amtmin!=null && amtmax!=null)
{
var url = '@Url.RouteUrl("Category", new { categoryId = 4 })';
var finalUrl = url + "?price=" + amtmin + "-" + amtmax;
window.location.href = finalUrl;
}
</script>
滑块
<p style="padding: 10px 0px 20px 10px;">
<label for="amount"> Price range: </label>
<input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range">
</div>
答案 0 :(得分:1)
我必须在范围滑块停止后重新加载页面停止事件,
最终的JQuery i
<script type="text/javascript">
var amtmin, amtmax;
$(function () {
$("#slider-range").slider({
range: true,
min: @from,
max: @To,
values: [@from, @To],
slide: function (event, ui) {
$("#amount").val("Rs. " + ui.values[0] + " - Rs. " + ui.values[1]);
amtmin = ui.values[0];
amtmax = ui.values[1];
},
stop: function(event, ui) {
var url = '@Url.RouteUrl("Category", new { categoryId = @catId })';
var finalUrl = url + "?price=" + amtmin + "-" + amtmax;
window.location.href = finalUrl;
}
});
$("#amount").val("Rs. " + $("#slider-range").slider("values", 0) + " - Rs. " + $("#slider-range").slider("values", 1));
});
</script>