堆棧內存溢出
  簡體   English   中英

jQuery UI Slider - 僅允許一個方向並刪除Range

[英]jQuery UI Slider - Only allow one direction and remove Range

 原文  2015-11-04 07:14:39  6   2    javascript/ jquery/ jquery-ui/ jquery-ui-slider

問題描述

我有兩個滑塊。 我希望我的滑塊只在一個方向滑動，即從左到右滑動。 我想刪除右側滑塊。 有沒有辦法刪除它？ 我無法更改此滑塊的代碼。 這是我的代碼。 

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Eligibility Slider</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css">

  </head>
  <body>

<div class="container"> 
<div class="row">
<div class="col-sm-4">
<div class="price-slider">
   <h4 class="great">Loan Amount</h4>          
   <div class="col-sm-12">      
    <div id="slider1"></div>            
    </div>      
</div>

<div class="price-slider">
   <h4 class="great">Monthly Income</h4>          
   <div class="col-sm-12">      
    <div id="slider2"></div>            
    </div>      
</div>

<div class="price-slider">
   <h4 class="great">Tenure</h4>         
   <div class="col-sm-12">      
    <div id="slider3"></div>            
    </div>      
</div> 

<div class="price-slider">
   <h4 class="great">Rate Of Interest</h4>              
   <div class="col-sm-12">      
    <div id="slider4"></div>            
    </div>      
</div>

</div>

<div class="col-sm-4">
<div class="price-box">
<div class="form-group">            
    <label for="amount" class="col-sm-12 control-label">Loan Amount  </label>
    <div class="col-sm-12">
        <div id="amount"> </div>
        <div id="slider1"> </div>
        <span class="price">.00</span>               
    </div>
</div>

<div class="form-group">            
    <label for="income" class="col-sm-12 control-label">Monthly Income  </label>
    <div class="col-sm-12">         
   <div id="income"> </div>
   <div id="slider2"> </div>
   <span class="price">.00</span>       
    </div>    
</div>

<div class="form-group">            
    <label for="tenure" class="col-sm-12 control-label">Tenure  </label>            
    <div class="col-sm-12">     
    <div id="duration"> </div>
   <div id="slider3"> </div>
    <span class="price">Months</span>       
    </div>    
</div>   

<div class="form-group">         
    <label for="interest" class="col-sm-12 control-label">Rate Of Interest  </label>         
    <div class="col-sm-12">   
    <div id="interest"> </div>
    <div id="slider4"> </div>

    </div>        
</div>                

</div>
</div>

</div>
</div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

    <script>

    $(document).ready(function () {
            $('#slider1').slider({
                range: true,
                min: 100000,
                max: 20000000,
                values: [100000, 20000000],
                 step: 100000,     

                create: function () {
                    var val = "1,00,000";
                    console.log(val);
                    $("#amount").text(val);
                },
                slide: function (event, ui) {
                    var val =  ui.values[0].toLocaleString('us-US');
                    console.log(val);

                    $("#amount").text(val);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    filterSystem(mi, mx);
                }
            })
        });

        function filterSystem(minPrice, maxPrice) {
            $("li.column").hide().filter(function () {
                var price = parseInt(jQuery(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }

$(document).ready(function () {
            $('#slider2').slider({
                range: true,
                min: 10000,
                max: 200000,
                values: [10000, 200000],
                step: 1000,                
                create: function () {
                    var val = "10,000";
                    console.log(val);
                    $("#income").text(val);
                },
                slide: function (event, ui) {
                    var val = ui.values[0].toLocaleString('us-US');
                    console.log(val);

                    $("#income").text(val);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    filterSystem(mi, mx);
                }
            })
        });

        $(document).ready(function () {
            $('#slider3').slider({
                range: true,
                min: 1,
                max: 360,
                values: [1, 360],
                step: 1,                                
                create: function () {
                    var val = "1";
                    console.log(val);
                    $("#duration").text(val);
                },
                slide: function (event, ui) {
                    var val = ui.values[0].toLocaleString('us-US');
                    console.log(val);

                    $("#duration").text(val);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    filterSystem(mi, mx);
                }
            })
        });
$(document).ready(function () {
            $('#slider4').slider({
                range: true,
                min: 6,
                max: 20,
                values: [6, 20],
                step: 0.25,                
                create: function () {
                    var val = "6";
                    console.log(val);
                    $("#interest").text(val);
                },
                slide: function (event, ui) {
                    var val = ui.values[0].toLocaleString('us-US');
                    console.log(val);

                    $("#interest").text(val);
                    var mi = ui.values[0];
                    var mx = ui.values[1];
                    filterSystem(mi, mx);
                }
            })
        });


        function filterSystem(minPrice, maxPrice) {
            $("li.column").hide().filter(function () {
                var price = parseInt(jQuery(this).data("price"), 10);
                return price >= minPrice && price <= maxPrice;
            }).show();
        }


        </script>
         </body>
</html>

2 個解決方案

解決方案1
 1 已采納  2015-11-04 08:43:10

 $(document).ready(function() { $('#slider1').slider({ range: false, min: 100000, max: 20000000, values: [100000], step: 100000, create: function() { var val = "1,00,000"; console.log(val); $("#amount").text(val); }, slide: function(event, ui) { var val = ui.values[0].toLocaleString('us-US'); console.log(val); $("#amount").text(val); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); function filterSystem(minPrice, maxPrice) { $("li.column").hide().filter(function() { var price = parseInt(jQuery(this).data("price"), 10); return price >= minPrice && price <= maxPrice; }).show(); } $(document).ready(function() { $('#slider2').slider({ range: false, min: 10000, max: 200000, values: [10000], step: 1000, create: function() { var val = "10,000"; console.log(val); $("#income").text(val); }, slide: function(event, ui) { var val = ui.values[0].toLocaleString('us-US'); console.log(val); $("#income").text(val); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); $(document).ready(function() { $('#slider3').slider({ range: false, min: 1, max: 360, values: [1], step: 1, create: function() { var val = "1"; console.log(val); $("#duration").text(val); }, slide: function(event, ui) { var val = ui.values[0].toLocaleString('us-US'); console.log(val); $("#duration").text(val); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); $(document).ready(function() { $('#slider4').slider({ range: false, min: 6, max: 20, values: [6], step: 0.25, create: function() { var val = "6"; console.log(val); $("#interest").text(val); }, slide: function(event, ui) { var val = ui.values[0].toLocaleString('us-US'); console.log(val); $("#interest").text(val); var mi = ui.values[0]; var mx = ui.values[1]; filterSystem(mi, mx); } }) }); function filterSystem(minPrice, maxPrice) { $("li.column").hide().filter(function() { var price = parseInt(jQuery(this).data("price"), 10); return price >= minPrice && price <= maxPrice; }).show(); } 
 <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="price-slider"> <h4 class="great">Loan Amount</h4> <div class="col-sm-12"> <div id="slider1"></div> </div> </div> <div class="price-slider"> <h4 class="great">Monthly Income</h4> <div class="col-sm-12"> <div id="slider2"></div> </div> </div> <div class="price-slider"> <h4 class="great">Tenure</h4> <div class="col-sm-12"> <div id="slider3"></div> </div> </div> <div class="price-slider"> <h4 class="great">Rate Of Interest</h4> <div class="col-sm-12"> <div id="slider4"></div> </div> </div> </div> <div class="col-sm-4"> <div class="price-box"> <div class="form-group"> <label for="amount" class="col-sm-12 control-label">Loan Amount</label> <div class="col-sm-12"> <div id="amount"></div> <div id="slider1"></div> <span class="price">.00</span> </div> </div> <div class="form-group"> <label for="income" class="col-sm-12 control-label">Monthly Income</label> <div class="col-sm-12"> <div id="income"></div> <div id="slider2"></div> <span class="price">.00</span> </div> </div> <div class="form-group"> <label for="tenure" class="col-sm-12 control-label">Tenure</label> <div class="col-sm-12"> <div id="duration"></div> <div id="slider3"></div> <span class="price">Months</span> </div> </div> <div class="form-group"> <label for="interest" class="col-sm-12 control-label">Rate Of Interest</label> <div class="col-sm-12"> <div id="interest"></div> <div id="slider4"></div> </div> </div> </div> </div> </div> </div>

解決方案2
 1  2015-11-04 08:51:11

要獲得1個句柄，請刪除range並在values數組中包含一個值。 

  $('#slider1').slider({
      min: 100000,
      max: 20000000,
      values: [100000],
      step: 100000,     

      create: function () {
          var val = "1,00,000";
          $("#amount").text(val);
      },
      slide: function (event, ui) {

          var val = ui.values[0];

          if(!$(this).data('old-value') || val >= $(this).data('old-value')){
               $(this).data('old-value', val);
               return true;
          }

          return false;
      }
  });

要在一個方向上強制滑塊，您需要在slide事件中return true/false 。 一個例子是將舊值存儲在data並檢查幻燈片。

有關示例，請參閱此小提琴中的頂部滑塊。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery UI范圍滑塊 jQuery UI自動完成中僅允許一個值 帶有字母的 jQuery UI 范圍滑塊 jQuery UI范圍滑塊工具提示 jQuery UI Slider：允許句柄交叉 單面jQuery UI滑塊 jQuery UI范圍滑塊插件與jQuery Mobile滑塊沖突 jQuery UI滑塊之間的時間范圍 jQuery ui range slider給出了錯誤的值 jquery ui滑塊范圍修復到RTL
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM