Skip to content

RangeSlider widget overflows its bounds when you set a max value in the URL higher than the data in the index #6881

@theRealPadster

Description

@theRealPadster

🐛 Current behavior

If you instantiate a rangeSlider widget without a max option, but then specify a max value/range in the page URL, when it loads it will render the "max" handle outside of the actual widget bounds if the data in your index is lower.

e.g. Your most expensive product is $5000, but you specify ?price%5D=%3A10000 in the URL, the slider will stick way outside of where the rest of the widget is.

🔍 Steps to reproduce

  1. Make a site using instantsearch
  2. Add a rangeSlider (e.g. for the price) without specifying the min/max in the options.
  3. Load the page and see what the price Algolia sets automatically as the max, based on your index data.
  4. Add the history router, so the params are exposed in the URL
  5. Modify the URL, so that the "max" value of the range is greater than the max value in your index data
  6. Load the page
  7. Observe the slider overflowing out of the boundaries
Image

Live reproduction

https://codesandbox.io/p/sandbox/instantsearch-rangeslider-breaks-out-if-max-is-higher-than-data-3m28gq

💭 Expected behavior

If you don't specify a max value when instantiating the rangeSlider, it should cap out the max value when rendering as the max value in your algolia index data, even if the URL specifies a higher number.

Package version

instantsearch.js 4.56.9 and also on 4.87.0

Operating system

macOS 26.2

Browser

Edge 144.0.3719.92 (arm64)

Code of Conduct

  • I agree to follow this project's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    triageIssues to be categorized by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions