如何格式化range类型滑块的<output>，实现数值重复同步显示？

你只需要修改oninput事件中的赋值逻辑，将单一数值拼接成NxN的格式，同时修正<output>标签的闭合问题并更新默认值即可实现需求：

修改后的完整代码 #

<input type="range" min="2" max="50" value="16" class="size"
 oninput="this.nextElementSibling.value = `${this.value}x${this.value}`">
<output>16x16</output>

关键改动说明 #

• 把oninput里的this.value替换为模板字符串${this.value}x${this.value}，实现数值的重复拼接
• 将<output>的默认内容从16改为16x16，保证初始状态显示正确格式
• 修复了原代码中<output>标签未闭合的语法问题

拖动滑块时，输出区域会同步显示当前滑块值的NxN格式，两个数值完全同步变化。

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