如何在范围滑块停止滑动Jquery后重新加载页面

时间:2013-05-09 07:36:28

标签: jquery jquery-ui

我正在使用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>

1 个答案:

答案 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>