Introduce slider varient for Dynamic filter #12268

[rowheat02]

Description

This PR adds a Slider UI option for dynamic filters in the widget builder. Users can now configure dynamic filters as sliders, including layout settings and validation/warning states.

Screen.Recording.2026-04-28.at.11.26.53.mov

• Slider variant only shows when the mode is "Single."
• Shows a warning when only one selectable item exists for that filter.
  

Please check if the PR fulfills these requirements

• The commit message follows our guidelines: https://github.com/geosolutions-it/MapStore2/blob/master/CONTRIBUTING.md
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

What kind of change does this PR introduce? (check one with "x", remove the others)

• Enhancement

Issue

What is the current behavior?

#12268

What is the new behavior?

New Slider Ui is introduced for Single selection mode.

Breaking change

Does this PR introduce a breaking change? (check one with "x", remove the other)

• Yes, and I documented them in migration notes
• No

Other useful information

What is different from the issue description?

• Before we decided to only show the slider for the number and Date type fields. But I think we don't need to restrict to those types. It works for all types.

[offtherailz]

Hi,
probably something went wrong during commit I have thiis error

Screencast.from.2026-04-28.18-25-23.webm

installHook.js:1 TypeError: Cannot read properties of undefined (reading 'length')
    at Object.onChange (3026.58e7c2e1dc1ddf2c.chunk.js:1:160258)
    at t.value (mapstore2.js:2:968896)
    at t.<anonymous> (mapstore2.js:2:969486)
    at hi (mapstore2.js:2:4358092)
    at pi (mapstore2.js:2:4357829)
    at cl (mapstore2.js:2:4408069)
    at t.unstable_runWithPriority (mapstore2.js:2:1352182)
    at Bo (mapstore2.js:2:4353680)
    at ll (mapstore2.js:2:4404444)
    at Ws (mapstore2.js:2:4394650)

[offtherailz]

• A scroolbar appears without apparent needing:
  

• cursor pointer shows only on ticks, but they are not clickable. The style should show the pointer finger only on clickable parts.

• It is a little difficoult to read labels placed vertically. Maybe an option selecting orientation of ticks may be useful

[rowheat02]

@offtherailz
For the first point here, there is an issue if we don't give height to the Slider. Ticks overlaps to another filter as ticks from the package are absolutely positioned.

So we must give height to the slider. In the elevation profile also they have given fix height to the slider.

One enhancement is done. As SLider is a horizontal component, the max height is not crucial(so replaced with height).
So for the slider, the user can type the height by their own use case, verifying visually. See the Demo below:

Screen.Recording.2026-04-30.at.14.34.10.mov

[offtherailz]

It looks good, I have a couple of minor corrections:

• I have the console.error flooded of errors of type:

installHook.js:1 Warning: Encountered two children with the same key, `4.42`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

They should be removed

• In order to have a better compatibility, also for the future, if the variant is unknown, it is better to soft fail, showing simply an advice on the widget. Instead this makes the whole application crash.

    if (!Component) {
        throw new Error(`Unsupported filter variant: ${layout.variant}`);
    }

[rowheat02]

• Infinite logs for duplicated ID on the component fixed.
• Show a message on the widget if the variant is unknown .
  

[offtherailz]

Successfully created backport PR for 2026.01.xx:

• [Backport 2026.01.xx] Introduce slider varient for Dynamic filter #12268 #12336