Using connectRange within a panel widget

[Njitram2000]

I created a normal range slider using this:

instantsearch.widgets.panel({
	templates: { header: () => 'Stock' },
})(instantsearch.widgets.rangeSlider)({
	container: '#stock',
	attribute: 'stock',
});

It works but I want to customize it so the docs recommend to use connectRange according to https://www.algolia.com/doc/api-reference/widgets/range-slider/js/#connector
This instructions are:

const renderRangeSlider = (renderOptions, isFirstRender) => {
  // Rendering logic
};

const customRangeSlider = connectRange(
  renderRangeSlider
);

search.addWidgets([
  customRangeSlider({
    // instance params
  })
]);

The issue I run into is that I want to wrap this in a panel like my other widgets. But the function that is returned by instantsearch.widgets.panel() does not accept the variable customRangeSlider. I'm doing this in typescript so I can see from the types that it requires something entirely different.

And I want to wrap it in a panel instead of rendering the panel header in my renderRangeSlider function because I am looping through all my filters and adding each to a panel using generic code. I would like it to remain consistent in that way.

So what is the correct approach in this case?

[Njitram2000]

I figured it out. You have to split it into two: the "connection" and the params:

search.addWidgets([
  instantsearch.widgets.rangeSlider({
    // instance params
  })
]);

becomes this to have it in a panel:

search.addWidgets([
  instantsearch.widgets.panel({
    templates: { header: () => 'Stock' },
  })(instantsearch.widgets.rangeSlider)({
    // instance params
  });
]);

and so this sample code from the docs:

const renderRangeSlider = (renderOptions, isFirstRender) => {
  // Rendering logic
};

const customRangeSlider = instantsearch.connectors.connectRange(
  renderRangeSlider
);

is added directly to the widgets like this:

search.addWidgets([
  customRangeSlider({
    // instance params
  })
]);

and added to a panel like this:

search.addWidgets([
  instantsearch.widgets.panel({
	templates: { header: () => 'Stock' },
  })(customRangeSlider)({
    // instance params
  });
]);

Note that customRangeSlider is a function that is called when adding it directly but passed as a reference for the panel version.
When doing it like this in typescript, the types suddenly line up.