更改值時防止滑塊跳動

Question

我有一個滑塊，可以實時更新其右側標簽上的值。 當數值從1位數變為2位數時，我該怎么做以防止其“跳”？ 如何給標簽固定位置，以免更改布局：

 var range = document.getElementById('range'); range.addEventListener('input', rangeChange); function rangeChange() { label.innerHTML = this.value; } 

 <label id="label">0</label> <input id="range" type="range" value=0 min=0 max=100> 

Answer 1

要么添加width: 20px;display: inline-block;要么width: 20px;display: inline-block; 到標簽。

要么

在兩個元素周圍添加一個包裝，並為其display: flex; align-items: center; display: flex; align-items: center; 標簽的樣式和寬度。

 var range = document.getElementById('range'); range.addEventListener('input', rangeChange); function rangeChange() { label.innerHTML = this.value; } 

 <div style="display: flex; align-items: center;"> <label id="label" style="width: 20px;">0</label> <input id="range" type="range" value=0 min=0 max=100> </div> 

Answer 2

選項1：將標簽貼到滑塊的右側

 var range = document.getElementById('range'); range.addEventListener('input', rangeChange); function rangeChange() { label.innerHTML = this.value; } 

 <input id="range" type="range" value=0 min=0 max=100> <label id="label">0</label> 

選項2：零填充：

 var range = document.getElementById('range'); range.addEventListener('input', rangeChange); function rangeChange() { var val = +(this.value); if (10 > val) { val = '00' + val; } else if (100 > val) { val = '0' + val; } label.innerHTML = val; } 

 <label id="label">000</label> <input id="range" type="range" value=0 min=0 max=100>