如何格式化<output>类型范围滑块？

Question

我正在尝试格式化范围滑块，以便结果看起来重复。例如，它默认返回16。我想在滑块下面看到16x16、32x32……两个数字必须相互移动。

以下是我尝试的：

<input type="range" min="2" max="50" value="16" class="size"
oninput="this.nextElementSibling.value = this.value">
<output>16</output

是否有格式化输出的方法？谢谢

Answer 1

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