Calcite-components: Slider enhancement requests

[bpatterson88]

Dashboards is requesting the following for the slider:

• Prevent handle labels from extending past the edge of the slider. This keeps the UI intact when dealing with compact components and longer numbers.
• Concat handle labels into a hyphenated range when they get close together. Readability concern.
• Hide rail labels when handle overlaps. Readability concern.
• Allow slider to have an inactive state. Handle and value is previewed on hover and added to the rail on click.
• (possibly not a direct slider concern) Add support for histogram visualization attached to slider. Histogram should show which portion is active as determined by the slider.

Let me know if these should be broken out into individual tickets

[macandcheese]

Thanks for opening, I think these are good additions.

Can you add some screenshots of issue / mockup of solution for the requested items?

Histogram support should be opened as a separate issue IMO, it might be out of scope for this component but we can take a look at what that might take.

The other ones seem like doable improvements!

[bpatterson88]

@macandcheese Added screenshots as well as an additional request. Will open another ticket for the histogram.

[bstifle]

some other ideas. def not sold on this but maybe something to ponder. maybe the number you last interacted with is prioritized, or they stack

[bpatterson88]

@bpatterson88 what font-size are you proposing for the start/end labels? do those disappear if the handles are on top of them?

@bstifle I'm mocking them with 12px and it seems to work well enough, not stuck on that though. They should disappear smoothly when a handle goes over the top... I'm picturing some kind of gradient washing over them.

[bstifle]

hahaha i am so confused

[bstifle]

these 2 issues inception

[macandcheese]

Thanks for the screenshots and comments, I think the slight overlap of the handles Bryan and Ben showed might work better than stacking - I imagine that transition could be a little jarring and the resulting hitboxes could be tough to manage. The "number-number" approach for handle label seems to always show the points as well which is nice

[bstifle]

yeah i really like the number-number thing too

[eriklharper]

Concat handle labels into a hyphenated range when they get close together. Readability concern.

Does the precise option handle the concern here?

Notice that when the numbers get really close together, because they render on completely separate horizontal planes, it makes them very readable without any additional work.

[bstifle]

would be nice to keep them both underneath the bar, some kind of fade out when the numbers get close. prefer the last handle used and show that number

[eriklharper]

I see, so should the behavior of the precise option simply be updated to display it like this?

Or should the precise option still retain its current behavior and we just add the hyphenation for cases when precise = false. Does this also mean that handle labels should move from above the handle to below in all cases as well?

[bstifle]

the hyphen and both handles and numbers underneath is a good display

"I see, so should the behavior of the precise option simply be updated to display it like this?"

• Only when using a graph.

"Does this also mean that handle labels should move from above the handle to below in all cases as well?"

• no only when using graph

[patrickarlt]

It would also be nice if we could use some of these enhancements with just <calcite-slider> and not just <calcite-graph>. We have a the following UI on an upcoming project:

So it would be to:

• Specifcy slider position on, over or under the track
• Allow clicking to edit the number in the slider

[macandcheese]

Re: @patrickarlt last point - example of current use case : https://github.com/Esri/calcite-components/issues/304 (design probably could use calcite-input, size to fit value)

[eriklharper]

I just noticed that numbers are displayed in the typical English locale with the comma at the thousandth place and I was wondering if we are to support all possible locales when it comes to number formatting via something like Number.toLocaleString? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

UPDATE: Looks like Number.toLocaleString takes the default locale so this will be a good default to go with.