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

Question

我正在尝试创建一个 HTML 范围滑块，范围从 0 到 100，最小属性为 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);

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

Showing a 0-100 range input with a min of 30 but still show the 0-30 area on the input

html

javascript

css

jquery

range