feat(filter): Add Slider Range Inputs Option for Numerical Range Filters

[payose]

SUMMARY
This PR reintroduces the slider as an additional method for configuring numerical range filters, based on community feedback following its removal in #31726.

The main improvements include:

• Allowing users to select between Slider, Range Inputs, or both when configuring a numerical range filter.
• Supporting cases where only one of the min or max values is configured, removing the previous dependency on both values.
• Enhancing usability for large ranges by making the slider available.
• Improving user guidance with placeholder defaults and metadata:
• Placeholders display the dataset’s min and max values.
• Metadata text like "Choose numbers between [x] and [x]" shown under the filter bar and in tooltips.
• Handling synchronization between slider and inputs: Updating inputs dynamically when the slider changes, and vice versa.
• UI behavior differs based on orientation:
  Horizontal mode: Slider rendered first, then inputs inline.
  Vertical mode: Metadata and error states positioned appropriately.
• Updated error messages to include the actual valid ranges.
• Ensured compatibility with the existing "Single value" filter configuration.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS
Open a dashboard and add or edit a numerical range filter.

In filter settings, configure:

• Only slider enabled.
• Only range inputs enabled.
• Both slider and range inputs enabled.

In vertical orientation:

• Confirm metadata text appears correctly.
• Confirm error states are shown under the filter with correct ranges.

In horizontal orientation:

• Confirm slider is shown first, inputs next to it.
• Error is displayed via tooltip
• Tooltip turns red to indicate when an error occurs

Test synchronization:

• Verify placeholders in inputs show dataset default min/max.
• Move the slider and verify input values update accordingly.
• Change input values and verify slider updates accordingly.
• Leave min or max empty intentionally and verify filter works with just one value.
• Validate that "Single value" mode continues working without issues.

ADDITIONAL INFORMATION
Has associated issue: #33150

[korbit-ai]

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Redundant Data Structure ▹ view	✅ Fix detected
	Complex Validation Logic ▹ view	✅ Fix detected
	Unreliable Modal Save Logic ▹ view	✅ Fix detected
	Silent failure in input handler ▹ view	✅ Fix detected
	Replace sequential waits with clear state expectations ▹ view	✅ Fix detected

Files scanned

​

File Path	Reviewed
superset-frontend/src/filters/components/common.ts	✅
superset-frontend/src/filters/components/Range/types.ts	✅
superset-frontend/src/dashboard/components/nativeFilters/utils.ts	✅
superset-frontend/cypress-base/cypress/e2e/dashboard/utils.ts	✅
superset-frontend/src/filters/components/Range/RangeFilterPlugin.tsx	✅
superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/FiltersConfigForm/FiltersConfigForm.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[github-actions]

@geido Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[github-actions]

@geido Ephemeral environment spinning up at http://54.213.24.145:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[geido]

Nit can we import theme at the top and then just reference it? Example

const SomeStyledThing = styled.div`
  ${({ theme }) => `
    padding: ${theme.gridUnit * 2}px;	
    border-radius: ${theme.borderRadius}px;
    border: 1px solid ${theme.colors.secondary.light3};
  `}
`;

[geido]

Just a typo. There is a semicolon in the text.

There is a more serious bug that looks weird. When changing the type of filter, for example going from Slider + Inputs to just Slider and then applying the filter on the Dashboard, the charts affected by the filter won't show the filter applied as they normally do.

Updating the input with both up/down arrows or manually does not reflect on the slider

I have selected the option "Single value" in the filter settings and the UI breaks. Also, it seems that the inputs are not respecting the single value any longer and are still showing both min and max inputs instead of just one as expected.

It looks like there are still relevant issues in the PR so I am not pausing testing here to give you a chance to fix the major problems first.

Thank you