javascript - 单面 jQuery UI slider

Question

我使用jQuery UI 范围 slider 来允许用户定义范围。根据用户的选择，我将显示/隐藏不同的 div。

为了实现这一目标，我使用 data-price="" 来检查该值是否大于或小于该值。

我想要实现的是:

• 价格只有一项选择，而不是从左边开始选择对了。
• 我想保留栏根据选择填充颜色的功能。 (在示例中为灰色)

我尝试将 range: true 更改为 range: false 但无法达到预期效果。

我的 JSFIDDLE 示例在这里: https://jsfiddle.net/L47mo8bm/

我已尝试以下操作，但不确定为什么逻辑不起作用:https://jsfiddle.net/57axLd53/1/

Answer 1

我更改了 .slider 函数中的一些选项。我将范围设置为 false 并使用单个值来初始化 slider 。您将必须更改显示产品的逻辑，因为它不适用于单个 slider 。至于颜色，我不确定你的意思，所以你必须澄清一下。

$(function () {
  $('#slider-container').slider({
      range: false,
      min: 299,
      max: 1099,
      value: 500,
      create: function() {
          $("#amount").val("$299 - $1099");
      },
      slide: function (event, ui) {
          $("#amount").val("$" + ui.value);
          var slider_value = ui.value;
          //filterSystem(slider_value);
      }
  })
});

function filterSystem(sliderValue) {
  $("#computers div.system").hide().filter(function () {
      // put logic here to show product within X price of selection
  }).show();
}