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

Question

So I created this filter using two separate sliders with 3 data points each.所以我使用两个单独的滑块创建了这个过滤器，每个滑块有 3 个数据点。 Each combination will show a different card depending on where the handle is on the slider.根据手柄在滑块上的位置，每个组合将显示不同的卡片。 The function seems to be working but I realized I may have used a multi-range slider when I don't need the second handle.该功能似乎正在运行，但我意识到当我不需要第二个手柄时，我可能使用了多范围滑块。 Is there a way to remove it?有没有办法去除它？

HTML 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 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);

});

here is the jsfiddle link: https://jsfiddle.net/dhzwkjx1/2/这是 jsfiddle 链接： https ://jsfiddle.net/dhzwkjx1/2/

Please let me know if there's anything I can do!如果有什么我可以做的，请告诉我！

Answer 1

If you want to have one of the sliders with one handle only, you should use fixed max/ min value如果您只想使用一个手柄的滑块之一，则应使用固定的最大值/最小值

 $(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 中删除第二个手柄？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-10-04 16:21:50

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-10-04 16:21:50

解决方案1
0 已采纳 2020-10-04 16:21:50