https://css.land/ranges/

1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<meta http-equiv="X-UA-Compatible" content="IE=edge">
6	<meta name="viewport" content="width=device-width, initial-scale=1.0">
7	<title>CSS Linear Range Mapping for Custom Properties</title>
8	<link rel="stylesheet" href="https://get.mavo.io/mavo.css">
9	<link rel="stylesheet" href="style.css">
10	

10<script src="https://get.mavo.io/mavo.js" async></script>

10
11	

11<script src="index.js" async></script>

11
12</head>
13<body>
14	<div mv-app="rangeMapping" mv-mode="edit">
15		<p>Our variable is <code>--<span property="variableName" mv-default="[url('variableName') or 'p']"></span></code>.
16		<p>
17			If <code>--[variableName]</code> is
18			<code property="min_x" mv-default="[url('min_x') or -1]"></code>,
19			we want to output
20			<code property="min_y" mv-default="[url('min_y') or '.2em']"></code>.
21		<p>
22			If <code>--[variableName]</code> is
23			<code property="max_x" mv-default="[url('max_x') or 1]">1</code>,
24			we want to output
25			<code property="max_y" mv-default="[url('max_y') or '.8em']">.8em</code>.
26
27		<p>The expression we need is <input property id="calcExpression" style="width: [calcExpression.length]ch" value="calc([a] * var(--[variableName]) + [b])" readonly></p>
28
29		<footer>
30			<a href="?min_x=[min_x]&min_y=[min_y]&max_x=[max_x]&max_y=[max_y]&variableName=[variableName]">Permalink to this range</a>
31			&bull;
32			<details>
33				<summary>Debug info</summary>
34				a_raw = <span property="a_raw">([max_y] - [min_y]) / ([max_x] - [min_x])</span><br>
35				a = <span property="a">[simplifyExpression(a_raw)]</span><br>
36				b_raw = <span property="b_raw">[min_y] - [a] * [min_x]</span><br>
37				b = <span property="b">[simplifyExpression(b_raw)]</span>
38			</details>
39			&bull; Made by <a href="https://lea.verou.me">Lea Verou</a> with <a href="https://mavo.io">Mavo</a>
40		</footer>
41	</div>
42</body>
43</html>