如何从 ui-slider 中删除第二个手柄？

Question

所以我使用两个单独的滑块创建了这个过滤器，每个滑块有 3 个数据点。根据手柄在滑块上的位置，每个组合将显示不同的卡片。该功能似乎有效，但我意识到当我不需要第二个手柄时我可能使用了多范围滑块。有办法去除吗？

HTML

<head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>
</head>
<body>
<h3>How much THC?</h3>
  <div class="slider thc-slider" id="price"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4><br><br><br>
<h3>How much CBD?</h3>
  <div class="slider" id="quality"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4>
<ul id="products">
  <li class="card-hidden" data-price="20" data-quality="20">Unwind</li>
  <li class="card-hidden" data-price="20" data-quality="10">Gentle</li>
  <li class="card-hidden" data-price="20" data-quality="0">Soothe</li>
  <li class="card-hidden" data-price="10" data-quality="20">Uplift</li>
  <li class="card-hidden" data-price="10" data-quality="10">Balanced</li>
  <li class="card-hidden" data-price="10" data-quality="0">Relax</li>
  <li class="card-hidden" data-price="0" data-quality="20">Fly</li>
  <li class="card-hidden" data-price="0" data-quality="10">Euphoria</li>
  <li data-price="0" data-quality="0">SLOW</li>
</ul>
</body>
</html>

Javascript

     $('#products').removeClass('card-hidden');
 });
    
    function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}


$(function() {
    var options = {
        hidden: true,
        range: true,
        min: 0,
        max: 20,
        step: 10,
        values: [0,20],
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 0);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 0);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };

    $("#price").slider(options);
    $("#quality").slider(options);

});

这是 jsfiddle link：https://jsfiddle.net/dhzwkjx1/2/

如果有什么我能做的，请告诉我！

Answer 1

如果你想让其中一个滑块只有一个手柄，你应该使用固定的最大/最小值

     $(function () {
     $('#products').removeClass('card-hidden');
 });
    
    function showProducts(minP, maxP, minQ, maxQ) {
    $("#products li").filter(function() {
        var price = parseInt($(this).data("price"), 10);
        var quality = parseInt($(this).data("quality"), 10);
        if(price >= minP && price <= maxP && quality >= minQ && quality <= maxQ){
             $(this).show();
        } else {
             $(this).hide();
        }
    });
}


$(function() {
    var options1 = {
        hidden: true,
        range: 'max',
        min: 0,
        max: 20,
        step: 10,
        values: 0,
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 0);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 0);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };
    var options2 = {
        hidden: true,
        range: 'min',
        min: 0,
        max: 20,
        step: 10,
        values: 20,
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 0);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 0);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };
    var options3 = {
        hidden: true,
        range: 'max',
        min: 0,
        max: 20,
        step: 10,
        values: [0,20],
        change: function(event, ui) {
            var minP = $("#price").slider("values", 0);
            var maxP = $("#price").slider("values", 0);
            var minQ = $("#quality").slider("values", 0);
            var maxQ = $("#quality").slider("values", 0);
            showProducts(minP, maxP, minQ, maxQ);
        }
    };
    $("#price").slider(options1);
    $("#quality").slider(options2);              $("#both").slider(options3);



});

h3 {
  color: #333 !important;
  font-size: 22px;
  text-align: center;
}
h4{
  color: #333 !important;
  font-size: 18px;
  font-weight: 500;
}
.left {
  float: left;
}
.right {
  float: right;
}
.card-hidden {
  display: none;
}
#products li{
  margin-top: 80px;
  font-size: 30px;
  list-style: none;
  color: red;
}

  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"o/>


<h3>How much THC?</h3>
  <div class="slider thc-slider" id="price"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4><br><br><br>
<h3>How much CBD?</h3>
  <div class="slider" id="quality"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4>
<h3>Two handles</h3>
  <div class="slider" id="both"></div>
  <h4 class="left">HIGH</h4>
  <h4 class="right">LOW</h4>
<ul id="products">
  <li class="card-hidden" data-price="20" data-quality="20">Unwind</li>
  <li class="card-hidden" data-price="20" data-quality="10">Gentle</li>
  <li class="card-hidden" data-price="20" data-quality="0">Soothe</li>
  <li class="card-hidden" data-price="10" data-quality="20">Uplift</li>
  <li class="card-hidden" data-price="10" data-quality="10">Balanced</li>
  <li class="card-hidden" data-price="10" data-quality="0">Relax</li>
  <li class="card-hidden" data-price="0" data-quality="20">Fly</li>
  <li class="card-hidden" data-price="0" data-quality="10">Euphoria</li>
  <li data-price="0" data-quality="0">SLOW</li>
</ul>

如何从 ui-slider 中删除第二个手柄？

How do I remove the second handle from this ui-slider?

javascript

css

filter

slide

uislider