如何实现支持半值增量的Range Slider？

我现在有一个运行正常的Range Slider，但它只支持整数值输入，想把其中一个Slider改成支持半步增量（比如1、1.5、2、2.5…），有没有简便的实现方法？

现有CSS代码 #

.slider, .slider2 {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: #999;
  outline: none;
  opacity: 1;
  -webkit-transition: .2s;
  transition: opacity .2s;
}
.slider:hover, .slider2:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb, .slider2::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

.slider::-moz-range-thumb, .slider2::-moz-range-thumb {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
}

现有HTML代码 #

<input name="newbelief" type="range" min="1" max="9" value="" class="slider2" id="newbelief">

现有JavaScript代码 #

var slider = document.getElementById("oldbelief");
var output = document.getElementById("belief_value");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
var slider2 = document.getElementById("newbelief");
var output2 = document.getElementById("belief2_value");
output2.innerHTML = slider2.value;

slider2.oninput = function() {
  output2.innerHTML = this.value;
}

实现方法 #

只需要两步就能搞定，无需修改CSS：

1. 修改HTML的range输入框：给目标Slider（这里是id为newbelief的）添加step="0.5"属性，同时设置合理的默认value（比如value="1"，避免初始显示空值）：

<input name="newbelief" type="range" min="1" max="9" step="0.5" value="1" class="slider2" id="newbelief">

2. 调整JavaScript的显示逻辑：确保初始值和滑动时能正确显示带小数的数值，避免出现格式混乱：

var slider2 = document.getElementById("newbelief");
var output2 = document.getElementById("belief2_value");
// 初始显示时格式化数值
output2.innerHTML = parseFloat(slider2.value).toFixed(1);

slider2.oninput = function() {
  // 滑动时实时显示保留一位小数的数值
  output2.innerHTML = parseFloat(this.value).toFixed(1);
}

修改完成后，Slider就能支持1、1.5、2…这样的半步增量，数值显示也会更规范。

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