jQuery UI 滑块 - 只允许一个方向并删除范围

Question

我有两个滑块。我希望我的滑块仅沿一个方向滑动，即从左向右滑动。我想删除右侧滑块。有什么办法可以去除吗？我无法更改此滑块的代码。这是我的代码。

    <!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>

Answer 1

$(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>

Answer 2

要获得 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 中并检查幻灯片。

请参阅此 Fiddle 中顶部的滑块作为示例。

jQuery UI 滑块 - 只允许一个方向并删除范围

jQuery UI Slider - Only allow one direction and remove Range

javascript

jquery

jquery-ui

jquery-ui-slider