一侧的 jQuery UI 滑块答案

【问题标题】：One sided jQuery UI slider一侧的 jQuery UI 滑块
【发布时间】：2017-12-08 12:22:55
【问题描述】：

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

为了实现这一点，我使用了data-price=""，它允许我检查该值是大于还是小于该值。

我想要实现的是：

价格只有一个选择，而不是从左侧选择和正确的。
我想保留栏根据选择填充颜色的功能。（在示例中为灰色）

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

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

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

【问题讨论】：

所以您想要一个滑块来选择价格？当前价格滑块而不是最大值和最小值？

标签： javascript jquery jquery-ui-slider

【解决方案1】：

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

$(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();
}

【讨论】：

这不起作用，因为它不会在您滑动时从左到右填充滑块，也不会再隐藏 div。

【解决方案2】：

我已使用此代码解决了以下问题：https://jsfiddle.net/57axLd53/4/

$(function() {
  $("#slider-container").slider({
    range: 'min',
    min: 4,
    max: 10,
    value: 8,
    step: 2,
    slide: function(event, ui) {
      var curValue = ui.value;
      var tooltip_Date = '<div class="tooltip_Date"><div class="tooltip_Date-inner">' + curValue + ' years</div><div class="tooltip_Date-arrow"></div></div>';
      $(this).find('.ui-slider-handle').html(tooltip_Date);
      $("#number_repayments").html(curValue);

      if (ui.value < 5) {
        $('.system1').css('display', 'block');
        $('.system2, .system3, .system4').css('display', 'none');
      } else if (ui.value < 7) {
        $('.system2').css('display', 'block');
        $('.system3, .system1, .system4').css('display', 'none');
      } else if (ui.value < 9) {
        $('.system3').css('display', 'block');
        $('.system2, .system1, .system4').css('display', 'none');
      } else if (ui.value > 9) {
        $('.system4').css('display', 'block');
        $('.system2, .system1, .system3').css('display', 'none');
      }

    },
    create: function(event, ui) {
      var curValue = ui.value || 8;
      var tooltip_Date = '<div class="tooltip_Date"><div class="tooltip_Date-inner">' + curValue + ' years</div><div class="tooltip_Date-arrow"></div></div>';
      $(this).find('.ui-slider-handle').html(tooltip_Date);
      $("#number_repayments").html(curValue);
    }
  });
});

f

【讨论】：