Enhancement: Configurable slider highlighting

[bpatterson88]

Description

Allow slider to highlight different sections of the rail, ex. left of the handle or right of the handle.

Acceptance Criteria

• Single value: rail can highlight right, left, or none

Relevant Info

Dashboards currently uses sliders to filter visualizations, and depending on the operator we highlight different parts of the rail. This request will give Calcite parity with the current Dashboards implementation of slider.

Which Component

Slider

Example Use Case

• Select all values greater than N (ex. to the right of the handle)
• Select N (ex. no highlighting)

[paulcpederson]

@bpatterson88 would this need to apply to range as well or just single value?

[bpatterson88]

@paulcpederson Nope, just the single value.

Also, updated the request to include a 'none' option for highlighting, where the slider is used to select a single value.

[benelan]

Hi @bpatterson88, is this still valid? If so can you please provide a use case example?

[bpatterson88]

@benelan Dashboards uses sliders for less than, greater than, and equals queries. Different parts of the slider rail are highlighted depending on the operator. The screenshots below show our current implementation.

[ellenupp]

Hi @benelan, just wanted to put this issue on your radar again and see where it's at. We would love to start using calcite-slider in dashboards but this is a blocker for us.

[benelan]

@bpatterson88 thanks for providing the use case, and thanks for bumping the issue @ellenupp. We are planning to get this in before v1 and will have a better timeline after our next triage meeting, to determine which upcoming sprint has cycles.

[richiecarmichael]

This is needed for the new JSAPI Range Slider (see #46032).

[ubatsukh]

@driskull as we discussed yesterday this is a high priority issue for us! MV needs Range Slider for multidimensional image services and the API implementation cannot proceed until the calcite slider has support for this.

[ellenupp]

Hello, any updates on this issue? We still need this for Dashboards.

[ashetland]

@jcfranco Thoughts on this? Some possible prop names:

highlight = none | greater-than | less-than
or
active-track = none | greater-than | less-than

active-track feels the most correct, but not sure if we already have a convention for this one.

cc @SkyeSeitz

[jcfranco]

I like highlight since it's both expressive and concise. range-highlight is too verbose, right? 😛

[SkyeSeitz]

It sounds like these would all still fall under the single value slider- correct? if so, I think the range-highlight prop name might confuse the distinction.

[SkyeSeitz]

One other note to confirm- this would mean all current single value sliders would change in appearance from the left design with a highlighted track to the right design with no highlight?

[ashetland]

Based on our discussion, yes it would seem that this would make the default highlight=none which might be considered a breaking change for folks.

And yes, just to confirm, this would only apply to the single slider, not range, per the comments above.

[jcfranco]

It sounds like these would all still fall under the single value slider- correct? if so, I think the range-highlight prop name might confuse the distinction.

Good point. I wasn't considering the range mode. How would highlight options interact with this mode?

this would mean all current single value sliders would change in appearance from the left design with a highlighted track to the right design with no highlight?
Based on our discussion, yes it would seem that this would make the default highlight=none which might be considered a breaking change for folks.

Is this because the proposed default would be "none" or is there another reason? Wondering if we could make less-than the default to minimize visual differences.

[SkyeSeitz]

Stepping back and evaluating the greater than/less than use case, it ultimately functions more as a range with a fixed start or end because it is outputting everything between two values. Adding something along the lines of a fixed-start/end prop as a range enhancement would avoid confusion and unwanted overrides to current default Sliders - changing them to a less than function or changing their appearance to no highlight.

I have mapped out that story below (design details for fixed-start/end could use work), but would be good to get confirmation from Dashboards on their use case first.

[ellenupp]

Thanks for the quick work on this!

We also have a use for range sliders but we only ever want to highlight between the two handles in that case. So this enhancement would just be for the single value case, when we want to highlight either the left/right/neither side of the track depending on the operation the value is used in.

Something like highlight = none | greater-than | less-than where this only has an effect when there's a single value would do the trick.

changing them to a less than function

I'm just envisioning this to be a visual representation, no change to the actual value or function of the slider.

[github-actions]

Installed and assigned for verification.

[DitwanP]

Verified on 2.8.0-next.12

[github-actions]

Installed and assigned for verification.

[jcfranco]

Installed! That should be the last of it. 🤞 #famouslastwords

Thanks everyone and sorry for the hassle!

[DitwanP]

😬🤞 Verified on 2.8.0-next.14