最近在做一個H5的改版項目，產品和設計給出的效果中有一個拖動滑塊可以改變輸入值的效果，類似如下圖這樣：
拿到這樣的設計稿后，我有點懵了，自己寫一個js？去網上找一個這樣的效果？自己寫一個可以，只是實現起來有點花時間，項目進度不允許；網上找一個，卻不知道這樣的效果該如何查，該輸入什么關鍵詞查詢。於是自己就按照效果大概的意思去查了一下，果真有這樣的案例和實現代碼，太好了。可仔細一看，大部分都是基於jquery的，而且還連帶着引用相關的插件，這不太好吧，這個效果也沒有多難吧，引用一個插件有點浪費之嫌吧。所以我就接着看那些案例的源代碼，結果發現，這些案例中都使用了<input type="range">，難不成這又是HTML5的屬性？我怎么不知道呢？於是就趕緊去查了一下，果真，這個玩意type="range"果真是HTML5的屬性，太給力了吧。以下是對type="range"的簡單介紹：
range 輸入類型用於應該包含指定范圍值的輸入字段。
range 類型顯示為滑塊。
| 屬性 | 值 | 描述 |
|---|---|---|
| max | number | 規定允許的最大值。 |
| min | number | 規定允許的最小值。 |
| step | finumbere | 規定合法數字間隔（如果 step="3"，則合法數字是 -3,0,3,6，以此類推） |
| value | number | 規定默認值。 |
<input type="range" name="points" min="1" max="10" />
知道了這些，我們就可以根據自己的實際需求來設置滑塊了，也可以根據實際需求來設置滑塊的顏色和背景色，簡直美極了。
以下是我自己寫的案例的實現代碼，想想還是很簡單的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>js+css3+HTML5拖動滑塊改變值</title>
<style>
body{background: #ecf0f1;color: #34495e;padding-top: 40px;text-shadow: white 1px 1px 1px;}
.value{border-bottom: 4px dashed #bdc3c7;text-align: center;font-weight: bold;font-size: 10em;width: 300px;height: 100px;line-height: 60px;margin: 40px auto;letter-spacing: -0.07em;text-shadow: white 2px 2px 2px;}
input[type="range"] {display: block;-webkit-appearance: none;background-color: #bdc3c7;width: 100%;height: 10px;border-radius: 5px;margin: 0 auto;outline: 0;}
input[type="range"]::-webkit-slider-thumb {-webkit-appearance: none;background-color: #e74c3c;width: 30px;height: 30px;border-radius: 50%;border: 2px solid white;cursor: pointer;transition: 0.3s ease-in-out;}
.range{position:relative;width:300px;margin:0 auto;}
.rang_width{position:absolute;top:-15px;left:0;background:#f00;height:10px;border-radius:5px 0 0 5px;}
</style>
</head>
<body>
<div class="value">0</div>
<div class="range">
<input type="range" min="0" max="12" step="1" value="0">
<p class="rang_width"></p>
</div>
<script>
var elem = document.querySelector('input[type="range"]');
var rangeValue = function(){
var newValue = elem.value;
var target = document.querySelector('.value');
target.innerHTML = newValue;
var max = elem.getAttribute("max");
var width = (91.3 / max * newValue) +"%"; //這里的91.3是用了整個滑塊的寬度300減去拖動的那個圓形滑塊的寬度30再加上圓形滑塊的邊框寬度4然后再除以300得來的，因為顯示拖動距離的rang_width在絕對定位后在滑動過程中會遮擋住圓形滑塊，導致圓形滑塊無法被拖動，所以要適當的減少rang_width在滑動時的寬度，當然rang_width的寬度是根據你自己的實際需求來計算出來的，並不是一成不變的91.3%
document.querySelector('.rang_width').style.width = width;
};
elem.addEventListener("input", rangeValue);
</script>
</body>
</html>
哈哈，是不是很簡單？對了，就是這么簡單！