我正在构建一个文本跟踪(字母间距)演示，我有范围滑块更新的CSSprops ，但我想扩展它，使标签也动态更新.这是一种工作，但令人不快.有没有办法做得很优雅，这样我就不会重复output2.textContent = this.value; output2.textContent = this.value;个等等了？
此外，当值从(例如)0.09->；0.1->；0.11时，UI会出错.我可以让它总是输出两个小数吗？ playbook 在收盘前.
<!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&family=Chivo+Mono&family=Playfair+Display+SC:wght@700&family=Playfair+Display:wght@700&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> 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> 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');
//const labels = document.querySelectorAll('label');
const output1 = document.querySelector('#value-caps');
const output2 = document.querySelector('#value-scaps');
function updateProp(event) {
const uom = this.dataset.uom || '';
document.documentElement.style.setProperty(`--_${this.name}`, this.value + uom);
output1.textContent = this.value;
output2.textContent = this.value;
}
rangeSliders.forEach(input => {
input.addEventListener('input', updateProp);
});
</script>
</body>
</html>