公司最近人手不足，于是，又開始折騰起Html來了
本文主要講slider滑塊的實現(xiàn)、樣式自定義、刻度繪制、與輸入框的聯(lián)動

我們先來看看效果圖

h5 slider.gif

上圖中，我們需要實現(xiàn)的難點就是那個綠色的滑塊，其它都是輸入框及文本框，容易實現(xiàn)。

滑塊的實現(xiàn)

其實，只要設置input的type，即可實現(xiàn)滑塊功能

<input id="slider" type="range" min="0" max="550" step="1"  /> // step表示滑動的最小步長

效果如下：

range.jpg

樣式自定義

雖然實現(xiàn)了滑塊的效果，但是感覺有點太丑了，主要是和設計相差太遠，于是，我們來美化下，先看看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=;
  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表示背景圖像僅出現(xiàn)一次，不會重復出現(xiàn)；最后的#cccccc則定義了右邊沒有滑到的區(qū)域為灰色。
而background-size設置了兩個寬度百分比，分別是#40c35f占的百分比和#cccccc占的百分比，這里都是相對于整個滑塊區(qū)域來講的。
關于線性漸變，下面一張linear-gradient(#cccccc, #000000)供參考

linear-gradient(#cccccc, #000000).png

說完css，我們在來看看html

<input type="range" id="slider" name="slider" class="ne-range" value="0" style="margin-top: 4vw;"/>

和之前的基本一致，這里沒有設置min,max,step等，留在后面js中設置，沒什么大的區(qū)別

        $.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第一個百分比就可以達到左側綠色覆蓋的目的。

這里就完成了滑塊的基本功能。

刻度繪制

但是，離上面效果圖還有蠻大差距的。比如上面的刻度，這里我取巧使用了寬度百分比來直接繪制了數(shù)字：

<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循環(huán)，但是第一次寫h5，還是先實現(xiàn)功能再考慮優(yōu)化吧。
到這里，我們就實現(xiàn)了一個滑塊，效果圖如下：

slider.jpg

與輸入框聯(lián)動

但是，最初的效果圖中，滑塊是可以和上方的輸入框聯(lián)動的。于是，我們再定義一個數(shù)字輸入框：

<input id="amount" name="amount" class="ne-input" placeholder="只允許輸入數(shù)字" pattern="\d*" type="number">

要達到輸入框內容跟著滑塊變化，我們需要改下上面js中的change方法，讓滑塊滑動時，改變amount輸入框的值

        var change = function ($input) {
            /*拖動滑塊的事件，內容可自行定義*/
            $("#amount").val($input.value);
        }

然后，當輸入框輸入數(shù)字時，我們的滑塊也需要跟著一起移動：

        $('#amount').bind("input", function (e) {
            var value = 0;
            // 過濾下輸入內容，因為個別特殊機型手機在input設置了只能輸入數(shù)字后還是能輸入符號
            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老五
至此，我們就完成了滑塊及相關功能：

h5 slider.jpg

ps：中間雖然還有一些css沒有給出，但是都是無關緊要的，比如div的class中ne-cell對應的css，就是一些常規(guī)的布局，相信會h5的肯定比我這個剛接觸幾天時間的人熟悉。另外，剛接觸h5，寫得有問題的地方多謝指出及糾正。

完成滑塊功能時，也是網上找資料，其中主要借鑒了以下博文：
https://blog.csdn.net/u013347241/article/details/51560290

IT老五（it-lao5）：關注公眾號，一起源創(chuàng)，一起學習！