显示0-100范围输入，最小值为30但仍显示输入上的0-30区域

Question

我正在尝试创建一个从0到100的HTML范围滑块，最小属性为30.

具有最小属性的范围滑块的标准功能是将范围的最左侧部分设置为最小属性。

$('input[type="range"]').on("input change", function() {
  $('span').html($(this).val());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="range" min="30" />
<span></span>

是否仍然可以让范围滑块从0到100但是具有30-100的可滚动区域而不是取得下面的图像？

Answer 1

以下是一个例子：http://codepen.io/zvona/pen/pJWJrp，简单的JS：

var range = document.querySelector('input[type=range]');
var value = document.querySelector('span');
var breakpoint = 30;

range.addEventListener('input', function(evt) {
  this.value = (this.value >= breakpoint) ? this.value : breakpoint;
  value.textContent = this.value;
}, false);