Re: [csswg-drafts] [css-pseudo-4] Standardizing input[type="range"] styling (#4410)

• From: Luke Warlow via GitHub <sysbot+gh@w3.org>
• Date: Fri, 15 Sep 2023 23:37:16 +0000
• To: public-css-archive@w3.org
• Message-ID: <issue_comment.created-1722028412-1694821035-sysbot+gh@w3.org>

Various element structures (not sure how much is web exposed)

Blink:

```
<progress>
   <::-webkit-progress-inner-element>
      <::-webkit-progress-bar>
         <::-webkit-progress-value />
      </>
   </>
</progress>
```

```
<meter>
   <::-webkit-meter-inner-element>
      <::-webkit-meter-bar>
         <::-webkit-meter-even-less-good-value />
         or
         <::-webkit-meter-suboptimum-value />
         or
         <::-webkit-meter-optimum-value />
      </>
   </>
</meter>
```

```
<input type="range">
   <::-webkit-slider-container>
      <::-webkit-slider-runnable-track>
         <::-webkit-slider-thumb />
      </>
   </>
</input>
```

WebKit:

```
<progress>
   <::-webkit-progress-inner-element>
      <::-webkit-progress-bar>
         <::-webkit-progress-value />
      </>
   </>
</progress>
```

```
<meter>
   <::-webkit-meter-inner-element>
      <::-webkit-meter-bar>
         <::-webkit-meter-suboptimum-value />
      </>
   </>
</meter>
```

```
<input type="range">
   <::-webkit-slider-container>
      <::-webkit-slider-runnable-track>
         <::-webkit-slider-thumb />
      </>
   </>
</input>
```

Firefox:


```
<progress>
   <::-moz-progress-bar />
</progress>
```

:-moz-meter-sub-sub-optimum::-moz-meter-bar
or
:-moz-meter-sub-optimum::-moz-meter-bar
or
:-moz-meter-optimum::-moz-meter-bar

```
<meter>
   <::-moz-meter-bar />
</progress>
```

```
<input type="range">
   <::-moz-range-track />
   <::-moz-range-progress />
   <::-moz-range-thumb />
</input>
```

I can see it was resolved to apply these to input[type=range], meter and progress. I can I think work out the intention for range inputs

I interpret the below to be the new structure.

```
<input type="range">
   <::slider-track />
   <::slider-fill />
   <::slider-thumb />
</input>
```

The intention for the others is less clear to me?

Would it simply translate to the below?

```
<meter>
   <::slider-track />
   <::slider-fill />
</meter>
```

```
<progress>
   <::slider-track />
   <::slider-fill />
</progress>
```


-- 
GitHub Notification of comment by lukewarlow
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4410#issuecomment-1722028412 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 15 September 2023 23:37:18 UTC