如何从此ui滑块上移除第二个手柄？

编程问答 2022-06-10

问题描述

因此，我使用两个具有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,maxQ);
        }
    };

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

});

这是jsfiddle链接：https://jsfiddle.net/dhzwkjx1/2/

请让我知道我能做些什么！

解决方法

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

     $(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,maxQ);
        }
    };
    var options2 = {
        hidden: true,range: 'min',values: 20,maxQ);
        }
    };
    var options3 = {
        hidden: true,values: [0,20],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>

filterfilterjavascriptslideuislider