How to set the title for a rangeslider in instantsearch.js?

Question

We are using instantsearch.js to display a list of products from an Algolia index. And we are using the rangeSlider widget to filter the results. However, I cannot figure out how to set the title of the slider. Everything else is working fine.

This is the code

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

hm the docs doesnt say anything about a title attribute. maybe you can target the `#ais-pris` and add some html there — cmgchess, Mar 29 '22 at 19:01
@cmgchess I know. The weird things is that it's mentioned in the react version of instantsearch. I have a hard time believing all the rangeSliders you choose to use should be nameless tho. — johnohod, Mar 30 '22 at 07:09
https://github.com/algolia/instantsearch.js/blob/61ad247c252a42743efa35d0e32d1802119e53a2/stories/panel.stories.ts#L58 https://instantsearchjs.netlify.app/stories/?path=/story/basics-panel--with-range-slider — cmgchess, Mar 31 '22 at 16:07

cmgchess · Answer 1 · 2023-04-15T06:38:15.633

Perhaps you are looking for a Panel . The React Instantsearch example list has this Rangeslider with Panel
Similarly I found in the Vanilla JS Instantsearch this Panel with Rangeslider.
The source for that story can be found here

You can create a Panel which wraps the Rangeslider widget and add a Header. Footer is optional

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',
  }),
]);

you can style as you want

How to set the title for a rangeslider in instantsearch.js?

1 Answers1