- From: 一丝 via GitHub <sysbot+gh@w3.org>
- Date: Fri, 29 Dec 2023 08:45:05 +0000
- To: public-css-archive@w3.org
In range input, progress has different calculation modes. In the following [example](https://codepen.io/yisi/pen/GReJxXr), the right edge of progress is always in the middle of the thumb.
This prevents the rounded corner radius from changing and overflowing when dragged to the far left.
https://github.com/w3c/csswg-drafts/assets/2784308/f366da0f-346a-49df-a9de-57a32759c7df
My question is, how can I implement such an algorithm using `clamp()` or `progress()`? I think this is the scenario that `progress()` should consider.
```css
.slider-progress {
--p1: calc((var(--range) - var(--range-min)) / (var(--range-max) - var(--range-min)));
--w1: clamp(28px, calc(100cqi * var(--p1)), calc(100cqi - 28px));
}
```
https://github.com/w3c/csswg-drafts/assets/2784308/5b865be7-e6ad-420c-9cbf-d87ea8e0f2a5
--
GitHub Notification of comment by yisibl
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7268#issuecomment-1871845488 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Friday, 29 December 2023 08:45:08 UTC