Trying to set values of (price) range slider from a custom router

I’m using a custom router and state mapping to get and set state from my URLs.

It’s working perfectly with my categories (set via the hierarchical menu), my search query and brands.

stateMapping: { 
  stateToRoute(uiState) {
  },
  routeToState(routeState) {
 
   // I've removed some stuff here as its not relavent...

    return {
          query: routeState.query.search,
          refinementList: {
            brand: routeState.query.brands && routeState.query.brands.split('~'),
          },
          range: { price: routeState.query.pricerange },
          hierarchicalMenu: {
            'categories.lvl0': categoryNames
          },
        };

    }
}

However, I cannot get the range to work.

The url looks like:

http://127.0.0.1:59378/categories/gloves?pricerange=10%3A916

But I when I look at the CurrentRefinement its just saying

{ "min": null, "max": null }

I know I’ve explained this REALLY badly, and you will probably tell me to go and setup a code pen, but I’m at peak frustration with it today, so hoping this is enough to explain my issue.

Hi there,

Thanks for reaching out to us.

I’ve made a simple example for you with price range in the url routing.
I assumed you’re using InstantSearch@v3.


The code is above.

If you click the following url, you’ll see the price range refined by default.
https://226wt.csb.app/?price=10%3A100&brands[0]=Whirlpool&brands[1]=KitchenAid

I hope this makes sense to you.
Let me know if this solves your issue.
If not, please change this sandbox to make it similar to yours.

Oh - that’s very kind. Thank you.

I’ve also now downloaded the example e-commerce store which uses it. I think I’ll be able to work it now.

Funny how a day and decent sleep makes you come up with a hundred new ways to debug it that weren’t there the day the night before lol

That’s true. Decent sleep has solved so many problems of mine :slightly_smiling_face:
Let me know if you need any other help!
Have a nice day.

Got this sorted in the end.

2 problems. The widget was causing weird extra urls getting pushed to the router when the dom changed.

The second issue was I hadn’t added the price to the facets to be filtered in the dashboard.

Thanks again for your help.

Glad to hear you made it.
Let us know if you have any other issue.

Have a nice week!