algolia - 如何在 instantsearch.js 中设置范围 slider 的标题？

Question

我们使用 instantsearch.js 显示来自 Algolia 索引的产品列表。我们正在使用 rangeSlider 小部件来过滤结果。但是，我不知道如何设置 slider 的标题。其他一切正常。

这是代码

 instantsearch.widgets.rangeSlider({
    title: "Pris",
    container: "#ais-pris",
    attribute: "sortprice",
    pips: false,
    step: 10,
})

Answer 1

也许您正在寻找 Panel . React Instantsearch 示例列表有这个 Rangeslider with Panel
同样，我在 Vanilla JS Instantsearch 中找到了这个 Panel with Rangeslider .
可以找到该故事的来源here

您可以创建一个包含 Rangeslider 小部件的面板并添加一个标题。页脚是可选的

const rangeSliderWithPanel = instantsearch.widgets.panel({
  templates: {
    header: 'This is the heading',
    footer: 'This is the footer'
  },
})(instantsearch.widgets.rangeSlider);

search.addWidgets([
  rangeSliderWithPanel({
    container: '#range-slider',
    attribute: 'price',
  }),
]);

你可以随心所欲地设计

codesandbox