顯示0-100範圍輸入，最小值爲30，但仍顯示輸入上的0-30區域

Question

我試圖創建一個從0-100，最小屬性爲30的HTML範圍滑塊。

具有最小屬性的範圍滑塊的標準功能是將範圍的最左側部分設置爲最小屬性。

$('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);