javascript - 根据范围滑块的值范围过滤结果的最佳方法？

Question

我有一个范围滑块，可以根据它们的output键过滤 JavaScript 对象：

<input id="outputSlider" class="form-control" type="range" min="4" max="10">

这是一个对象的小例子：（其中有 50 个）

const stratPickups = {
    "Model 1": {
      name: "Model 1",
      design: "single-coil",
      output: 4,
      tone: 3,
      
    },
    "Model 2": {
      name: "Model 2",
      design: "single-coil",
      output: 5,
      tone: 5,
      
    },
    "Model 3": {
      name: "Model 3",
      design: "single-coil",
      output: 6,
      tone: 6,
    },
}

在滑块的输入上，它在此处调用此函数：

const outputSliderFunction = () => {
    const slider = document.querySelector("#outputSlider");
    let sliderValue = Number(slider.value);

    activeFilters.output = sliderValue; //Pushes the slider value into an object called activeFilters

    const filteredData = performFilter(data, activeFilters);

    refreshView(filteredData); //Displays the "cards" with the product information
  };

现在，这是有效的，但我想改进它。它现在的工作方式，如果sliderValue匹配output，卡片将显示在页面上。但是，滑块范围中有很大一部分没有显示任何结果。我想更改函数以接受一系列输入，但我不确定如何以及正在寻找想法。

我以为我可以将对象更改为具有min-outputandmax-output并弄清楚当滑块值介于它们之间时如何显示结果，但我不确定我该怎么做。

有任何想法吗？

这是 performFilter 函数：

  const performFilter = (data, activeFilters) => {
    let result = data;
    Object.keys(activeFilters).forEach((key) => {
      result = result.filter((d) => d[key] === activeFilters[key]);
    });
    return result;
  };

标签： javascriptjavascript-objects