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,
})

Answer 1

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