0

スライダーの最小価格と最大価格に基づいて、価格にレンジスライダーを使用しています...表示製品があります...レンジスライダーがスライドを停止した後、最小値と最大値でページをリロードしたいのですが、すべてのスライドでJqueryがリロードされます...しかしレンジスライダーがスライドを停止した後にページをリロードする

私の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>
4

1 に答える 1

2

Range Slider が停止した後、ページをリロードするためにイベントを停止する必要があります。

最終的な 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>
于 2013-05-09T07:45:22.377 に答える