fix: range color issue when there's a ling range slider on a ultrawide screen (#4335). closes #4334

- use `100cqw` instead of `100rem`

close #4334

Author: pdanpdan

packages/daisyui/src/components/range.css

@@ -60,8 +60,8 @@
         0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
         0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
         0 0 0 2rem var(--range-thumb) inset,
-        calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2))
-          0 0 calc(100rem * var(--range-fill));
+        calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2))
+          0 0 calc(100cqw * var(--range-fill));
     }
 
     &::-moz-range-track {
@@ -90,8 +90,8 @@
         0 8px 0 -4px oklch(100% 0 0 / calc(var(--depth) * 0.1)) inset,
         0 1px color-mix(in oklab, currentColor calc(var(--depth) * 10%), #0000),
         0 0 0 2rem var(--range-thumb) inset,
-        calc((var(--range-dir, 1) * -100rem) - (var(--range-dir, 1) * var(--range-thumb-size) / 2))
-          0 0 calc(100rem * var(--range-fill));
+        calc((var(--range-dir, 1) * -100cqw) - (var(--range-dir, 1) * var(--range-thumb-size) / 2))
+          0 0 calc(100cqw * var(--range-fill));
     }
     &:disabled {
       @apply cursor-not-allowed opacity-30;