优化文本字距调整Demo：优雅更新标签与统一小数格式

核心修改内容 #

针对你提出的两个问题，以下是优化后的代码及说明：

优化后的完整代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Trax…text tracking tool</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Chivo&amp;family=Chivo+Mono&amp;family=Playfair+Display+SC:wght@700&amp;family=Playfair+Display:wght@700&amp;display=swap" rel="stylesheet">
    <meta name="description" content="description">
    <style>
        * {
            outline: cornflowerblue dotted 0.5px;
        }

        * {
            margin: 0;
        }

        :root {
            --_trax-fontFamily-caps: 'Playfair Display', serif;
            --_trax-fontFamily-scaps: 'Playfair Display SC', serif;
            --_trax-fontFamily-body: 'Chivo', sans-serif;
            --_trax-fontFamily-mono: 'Chivo Mono', monospace;

            --_trax-textTracking-caps: var(--trax-textTracking-caps, 0.00cap);
            --_trax-textTracking-scaps: var(--trax-textTracking-scaps, 0.00ex);
            --_trax-textTracking-body: var(--trax-textTracking-body, 0.00em);
            --_trax-textTracking-mono: var(--trax-textTracking-mono, 0.00ch);

            --_trax-text-measure: var(--trax-text-measure, 66em);
        }

        body {
            box-sizing: content-box;
            margin-inline: auto;
            text-align: center;
            max-inline-size: var(--_trax-text-measure);
            padding-inline-start: 1rem;
            padding-inline-end: 1rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: var(--_trax-fontFamily-mono);
        }

        h1 {
            font-size: 5rem;
        }

        h1.caps {
            font-family: var(--_trax-fontFamily-caps);
            letter-spacing: var(--_trax-textTracking-caps);
            text-transform: uppercase;
        }

        h1.scaps {
            font-family: var(--_trax-fontFamily-scaps);
            letter-spacing: var(--_trax-textTracking-scaps);
        }

        .align-self\:flex-start,
        .asfs {
            align-self: flex-start;
        }

        /* add range slider code */
    </style>
</head>

<body>

    <p class="align-self:flex-start">Capitals</p>
    <h1 class="caps">Hamburgevons</h1>
    <div class="controls">
        <label for="trax-textTracking-caps" id="value-caps">0.00</label><span>&#8198;cap</span>
        <input name="trax-textTracking-caps" type="range" min="-0.30" max="0.30" value="0.00" step="0.01" data-uom="cap">
        <button>CSS</button>
    </div>

    <p class="align-self:flex-start">Small Capitals</p>
    <h1 class="scaps">Hamburgevons</h1>
    <div class="controls">
        <label for="trax-textTracking-scaps" id="value-scaps">0.00</label><span>&#8198;ex</span>
        <input name="trax-textTracking-scaps" type="range" min="-0.30" max="0.30" value="0.00" step="0.01" data-uom="ex">
        <button>CSS</button>
    </div>

    <script>
        const rangeSliders = document.querySelectorAll('input');

        function updateProp() {
            const uom = this.dataset.uom || '';
            // 更新对应的CSS变量
            document.documentElement.style.setProperty(`--_${this.name}`, this.value + uom);
            
            // 动态找到当前滑块对应的数值显示标签
            const valueLabel = this.parentElement.querySelector('label');
            // 格式化数值为两位小数，避免UI跳动
            valueLabel.textContent = Number(this.value).toFixed(2);
        }

        rangeSliders.forEach(input => {
            input.addEventListener('input', updateProp);
        });
    </script>

</body>

</html>

关键优化说明 #

1. 消除冗余代码，实现动态标签关联

   • 移除了硬编码的output1、output2变量
   • 通过this.parentElement.querySelector('label')自动定位当前滑块所在容器内的数值显示标签，新增滑块时无需修改脚本，扩展性更强

2. 解决数值跳动问题，强制两位小数显示

   • 使用Number(this.value).toFixed(2)将数值格式化为固定两位小数，例如：
     • 0.1 → "0.10"
     • 0.09 → "0.09"
     • 0.11 → "0.11"
   • 固定的位数确保标签宽度一致，彻底解决数值变化导致的UI跳动问题

内容的提问来源于stack exchange，提问作者designtools