Best practice regarding min & max values for filtering

Questions
1

What would be the best practice regarding min and max values.
Is it always two fields with min & max separated and its all handled in the UI?
Or would it be best to include both the min & max in the same field with a dash (-) between the values? And let the user have one field in the filter ui on the website to select the relevant interval?

Im mostly after what is best user experience UI-wise when it comes to both searchability and filterability where filterability would possibly be the most important of the two if i have to choose between them.

Lets say i can only handle 50kg so i want to find products that works within that range for example 30-60kg.

Important to know is that we are building in React & the new Storefront API, so no MVC-help at all here.

Litium version: 8

2

There are two type of facets, range and distinct facets. You most probably should use the Range facet since you mention min and max values. Range facet should work with Int and Decimal.

The Storefront API’s search query requires min and max values for range filter, so you should send both min and max. Range facet should be rendered as Slider in React accelerator.