如何在instantsearch.js中设置测距仪的标题？

Question

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

这是密码

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

Answer 1

也许你在找一个面板。示例列表具有以下带面板的测距仪

类似地，我在这个带测距仪的面板中找到了。

这个故事的来源可以找到这里。

您可以创建一个Panel，它封装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',
  }),
]);

​

你可以随心所欲

码箱