Re: [csswg-drafts] [css-values] Proposal for a 'progress' function to calculate progress between two <length> values (#7268)

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