[Range] Add * to slider-thumb and tick

[brechtDR]

I following this idea for an API this would be logical.

[lukewarlow]

Perhaps we should allow the non functional version to target all of them and the functional to target specific ones?

[lukewarlow]

There were discussions in the csswg about multiple slider-fills so it might be worth looking at those conversations?

[gregwhitworth]

There were discussions in the csswg about multiple slider-fills so it might be worth looking at those conversations?

@lukewarlow mind linking to these conversations?

[lukewarlow]

Sorry for the delay: w3c/csswg-drafts#12419

[lukewarlow]

Exposing custom properties by the browser is going to be a non-starter I suspect. I think instead a new function that returns the value is a better starting point. (Alternatively, perhaps we can get it from the CSS forms control-value() function or something)

[brechtDR]

@lukewarlow I updated some of the explainer according to your feedback.

I think we should keep ::slider-thumb as well and just make it select the first thumb

Here I don't really agree; to be honest, it might be worth opening a discussion. I'd expect it to target all thumbs as well, which would make the (*) not needed anymore. For consistency's sake, the (*) would still be nice to have... It could even be used for differentiating a single range with a multi-range in a reset:

::slider-thumb { background: green; } /* single and multi-sliders are all green */
::slider-thumb(*) { background: orange;} /* now all single sliders are green, but the rangegroup ones are orange */
::slider-thumb(2) { background: red;} /* now all single sliders are green, but the rangegroup ones are orange, the second thumb is red */

Not taken up in this explainer, but something that came to mind is if these thumbs are actually considered siblings? This would allow you to do:

::slider-thumb(*) {
  --start-hue: 180; /* Teal */
  --hue-range: 120; /* Range from Teal to Magenta */
  
  /* distribute a range of hues across all items using sibling-count and index */
  background-color: oklch(
    65% 0.35
      calc(
        var(--start-hue) + (var(--hue-range) / (sibling-count() - 1)) *
          (sibling-index() - 1)
      )
  );
}

(pretty much this idea: https://codepen.io/utilitybend/pen/PwPxePK)

But that might be stretching it, and I'll make an issue of this later on. It should certainly be picked up, but maybe out of scope for this particular PR.

Tagging @gregwhitworth and @keithamus as well to inform. I was a bit delayed.

[lukewarlow]

I think some of this probably needs further thought and maybe some details will be changed but approving to keep things moving.

[brechtDR]

I think some of this probably needs further thought and maybe some details will be changed but approving to keep things moving.

@lukewarlow Absolutely. The way I see it, this is still getting the starting point up and running for the first experimental implementations.