h5 range實現slider滑塊功能及樣式自定義
阿新 • • 發佈：2018-11-20
公司最近人手不足，於是，又開始折騰起Html來了
本文主要講slider滑塊的實現、樣式自定義、刻度繪製、與輸入框的聯動
######我們先來看看效果圖
上圖中，我們需要實現的難點就是那個綠色的滑塊，其它都是輸入框及文字框，容易實現。
###滑塊的實現
其實，只要設定input的type，即可實現滑塊功能
<input id="slider" type="range" min="0" max="550" step="1" /> // step表示滑動的最小步長
效果如下：
###樣式自定義
雖然實現了滑塊的效果，但是感覺有點太醜了，主要是和設計相差太遠，於是，我們來美化下，先看看css
/** * @range.css **/ .ne-range_thumb, input.ne-range[type=range]::-webkit-slider-thumb { width: 2em; height: 2em; border-radius: 50%; border: 0/**1px solid #45bd5c*/; background-color: #5cdf84; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.21); -webkit-transition: border-color 0.15s, background-color 0.15s; transition: border-color 0.15s, background-color 0.15s; cursor: pointer; background-clip: padding-box; box-sizing: border-box; } .ne-range_thumb:active, input.ne-range[type=range]::-webkit-slider-thumb:active { border: 0/**1px solid #45bd5c*/; background-color: #5cdf84; } .ne-range_track, input.ne-range[type=range] { width: 100%; height: 8px; border-radius: 8px; margin: .8em 0; padding: 0; cursor: pointer; border: 0; /**background-color: #45bd5c;*/ background: -webkit-linear-gradient(#40c35f, #40c35f) no-repeat #cccccc; background-size: 0% 100%; } .ne-range_track > span { display: block; width: 0%; height: 100%; background-color: #40c35f; } .ne-range_tips { position: absolute; margin-top: -2em; width: 6em; text-align: center; margin-left: -3em; } .ne-range_thumb > .ne-range_tips { margin-left: -2.15em; } .ne-range_tips > span { position: relative; display: inline-block; padding: 0 3px; min-width: 1.2em; color: white; background: rgba(0, 0, 0, 0.5); border-radius: 3px; text-align: center; } .ne-range_tips > span::after { content: ''; position: absolute; left: 50%; bottom: -0.25em; margin-left: -0.3em; border: 0.3em solid rgba(0, 0, 0, 0.5); border-right-color: transparent; border-left-color: transparent; border-bottom: 0; } /*Real Range*/ input.ne-range[type=range] { position: relative; outline: 0; -webkit-appearance: none !important; } input.ne-range[type=range]::-webkit-slider-thumb { -webkit-appearance: none !important; } /*Virtual Range*/ .ne-range { display: inline-block; position: relative; width: 100%; font-size: 1em; } .ne-range_thumb { position: absolute; top: 0; margin-left: -0.85em; } .ne-range_thumb.ondrag > .ne-range_tips { visibility: visible; }
有點多，說下關鍵點，thumb相關的是設定滑塊按鈕（即那個圓點）相關屬性，track即那一條滑動條。
需要注意的是下面兩行程式碼
background: -webkit-linear-gradient(#40c35f, #40c35f) no-repeat #cccccc;
background-size: 0% 100%;
background設定了-webkit，因為我這邊是針對手機端；-linear-gradient表示線性漸變，括號中兩個顏色值都是#40c35f，此時就是純色的綠色；no-repeat表示背景影象僅出現一次，不會重複出現；最後的#cccccc則定義了右邊沒有滑到的區域為灰色。
而background-size設定了兩個寬度百分比，分別是#40c35f佔的百分比和#cccccc佔的百分比，這裡都是相對於整個滑塊區域來講的。
關於線性漸變，下面一張linear-gradient(#cccccc, #000000)供參考
說完css，我們在來看看html
<input type="range" id="slider" name="slider" class="ne-range" value="0" style="margin-top: 4vw;"/>
和之前的基本一致，這裡沒有設定min,max,step等，留在後面js中設定，沒什麼大的區別
$.fn.RangeSlider = function (cfg) {
this.sliderCfg = {
min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
step: cfg && Number(cfg.step) ? cfg.step : 1,
callback: cfg && cfg.callback ? cfg.callback : null
};
var $input = $(this);
var min = this.sliderCfg.min;
var max = this.sliderCfg.max;
var step = this.sliderCfg.step;
var callback = this.sliderCfg.callback;
$input.attr('min', min)
.attr('max', max)
.attr('step', step);
$input.bind("input", function (e) {
$input.attr('value', this.value);
$input.css('background-size', this.value * 100.0 / max + '% 100%');
if ($.isFunction(callback)) {
callback(this);
}
});
};
var change = function ($input) {
/*拖動滑塊的事件，內容可自行定義*/
}
$('#slider').RangeSlider({ min: 0, max: 550, step: 1, callback: change });
這裡注意，繫結的是$input.bind(“input”，function）事件，而不是change事件，因為我們需要在推動的時候就改變顏色值，而不是拖動結束之後再改變顏色值。
改變滑塊顏色值的js是$input.css，這裡我們改變background-size第一個百分比就可以達到左側綠色覆蓋的目的。
這裡就完成了滑塊的基本功能。
###刻度繪製
但是，離上面效果圖還有蠻大差距的。比如上面的刻度，這裡我取巧使用了寬度百分比來直接繪製了數字：
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">0</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">50</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">100</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">150</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">200</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">250</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">300</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">350</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">400</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">450</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">500</label></div>
<div class="ne-cell-center" style="width: 9%"><label class="ne-label" style="color: #333333; font-size: 3.2vw">550</label></div>
<div class="align-right"><label class="ne-label" style="font-size: 2.5vw">單位：毫升(ml)</label></div>
當然有很多更好的辦法，至少可以寫個js迴圈，但是第一次寫h5，還是先實現功能再考慮優化吧。
到這裡，我們就實現了一個滑塊，效果圖如下：
###與輸入框聯動
但是，最初的效果圖中，滑塊是可以和上方的輸入框聯動的。於是，我們再定義一個數字輸入框：
<input id="amount" name="amount" class="ne-input" placeholder="只允許輸入數字" pattern="\d*" type="number">
要達到輸入框內容跟著滑塊變化，我們需要改下上面js中的change方法，讓滑塊滑動時，改變amount輸入框的值
var change = function ($input) {
/*拖動滑塊的事件，內容可自行定義*/
$("#amount").val($input.value);
}
然後，當輸入框輸入數字時，我們的滑塊也需要跟著一起移動：
$('#amount').bind("input", function (e) {
var value = 0;
// 過濾下輸入內容，因為個別特殊機型手機在input設定了只能輸入數字後還是能輸入符號
if (/^[1-9][0-9]*/.test(this.value)) {
value = this.value;
}
// 這裡保證輸入最大值為550，與滑塊一致
if (this.value > 550) {
value = 550;
$("#amount").val(550);
}
// 這裡設定滑塊的值和css
$("#slider").val(value).css('background-size', value * 100.0 / 550 + '% 100%');
});
原文：簡書ThinkinLiu 部落格: IT老五
至此，我們就完成了滑塊及相關功能：
ps：中間雖然還有一些css沒有給出，但是都是無關緊要的，比如div的class中ne-cell對應的css，就是一些常規的佈局，相信會h5的肯定比我這個剛接觸幾天時間的人熟悉。另外，剛接觸h5，寫得有問題的地方多謝指出及糾正。
完成滑塊功能時，也是網上找資料，其中主要借鑑了以下博文：
https://blog.csdn.net/u013347241/article/details/51560290