Timeslider labels - Create option to hide or disable them

[dan-bowerman]

Description

If a timeslider has too many notches on it, labels can overlap and look messy. Since the value ranges are already described by the label above the slider, perhaps we can have an option to omit labels entirely, showing only the notches.

Alternatives considered

Open to ideas!

[james-rae]

If we get dinged for a11y (for no labels or start-end labels not enough), here is a terrible mockup of something that might work. It might also violate a11y rules though (e.g. Rule 1.3, though it can be subjectively interpreted).

[james-rae]

Less visually impressive but I imagine would satisfy a11y. The combos would render upwards when opened on the site (i'm just being lazy with mockups)

[dan-bowerman]

From James in the Slack chat:

https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child
So if there's a class targeting whatever contains all the slider ticks, you could probably do something like (CSS will be wrong, just the gist of it)

.listTickClass {
  display: none;
}

.listTickClass:first-child, .listTickClass:last-child {
  display: allgood;
}

Spencer replies:

What James suggested (only first and last label) was done for https://climate-viewer.canada.ca/#/?v=rdpa6&d=capa&cp=-95.80098000546008,59.67409464609375&z=2&ts=1715904000000 and I think it works well.
If we want more labels I remember it being fairly straightforward to have the slider library show every Nth label. Could also be configurable.

[dan-bowerman]

An easy Editor-friendly workaround is to stick the following snippet into any slide:
<style>.time-slider .noUi-value-horizontal { display: none; }</style>

Be advised: This will remove all timesliders labels on the page. There don't appear to be any WCAG or functional consequences to hiding these labels.