2. 程式人生 > >HTML5—————— 自定義(滑動條)input[type="range"]樣式

HTML5—————— 自定義(滑動條)input[type="range"]樣式

阿新 • • 發佈：2019-01-05

1、如何使用滑動條？

用法很簡單，如下所示：

<input type="range" value="0">
  • 1
  • 1

各瀏覽器原始樣式如下： 
Chrome: 這裡寫圖片描述 
Firefox:  這裡寫圖片描述 
IE 9+:      這裡寫圖片描述 
常用（部分）屬性如下：

屬性 描述
max 設定或返回滑塊控制元件的最大值
min 設定或返回滑塊控制元件的最小值
step 設定或返回每次拖動滑塊控制元件時的遞增量
value 設定或返回滑塊控制元件的 value 屬性值
defaultValue 設定或返回滑塊控制元件的預設值
autofocus 設定或返回滑塊控制元件在頁面載入後是否應自動獲取焦點

2、如何美化滑動條？

首先提一個問題有哪些方式能完成對滑動條的美化？目前我所能想到的就是如下的兩種方案：

  • 直接通過css完成樣式改造
  • 將滑動條隱藏(設定opacity: 0)，通過自定義div實現

這次所要介紹的第一種較為簡單的實現方式。 

3、具體的實現方案是什麼？

美化滑動控制元件，需要完成以下的五個步驟：

  • 去除系統預設的樣式；
  • 給滑動軌道(track)新增樣式；
  • 給滑塊(thumb)新增樣式；
  • 根據滑塊所在位置填充進度條；
  • 實現多瀏覽器相容。

以上就是實現滑動控制元件美化的整個流程。我們今天所要達到的效果是這樣的：這裡寫圖片描述如果想要實現填充進度條的效果，在IE 9以上的瀏覽器中可以使用::-ms-fill-lower 和 ::-ms-fill-upper來自定義進度條；在Firefox瀏覽器中則可以通過::-moz-range-progress來自定義；而Chrome瀏覽器中不支援直接設定進度條，而達到填充的效果，所以首先針對Chrome瀏覽器來實現整個流程。

3.1 去除系統預設的樣式

這是美化滑動控制元件的第一步，這步操作是為了不使用原有的樣式，使之後的自定義樣式有效。程式碼很簡單如下所示，不過要注意的是對基於 webkit 的瀏覽器，如Chrome, Safari, Opera等，滑塊也要移除預設樣式。

input[type=range] {
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px; /*這個屬性設定使填充進度條時的圖形為圓角*/
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance
 
: none;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

3.2 給滑動軌道(track)新增樣式

正式開始自定義控制元件樣式了。首先是自定義滑動控制元件的軌道，程式碼很簡單，直接貼出來。

input[type=range]::-webkit-slider-runnable-track {
    height: 15px;
    border-radius: 10px; /*將軌道設為圓角的*/
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*軌道內建陰影效果*/
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

原始的控制元件獲取到焦點時，會顯示包裹整個控制元件的邊框，所以還需要把邊框取消。

input[type=range]:focus {
    outline: none;
}
  • 1
  • 2
  • 3
  • 1
  • 2
  • 3

3.3 給滑塊(thumb)新增樣式

下面對滑塊的樣式進行變更，css程式碼也不是很複雜，如下所示：

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    margin-top: -5px; /*使滑塊超出軌道部分的偏移量相等*/
    background: #ffffff; 
    border-radius: 50%; /*外觀設定為圓形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*設定邊框*/
    box-shadow: 0 .125em .125em #3b4547; /*新增底部陰影*/
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

3.4 根據滑塊所在位置填充進度條

新建一個RangeSlider.js檔案，實現對滑動控制元件屬性的設定、事件的監聽、以及設定回撥函式。監聽input事件時，對進度條進行填充，讓我們來直接看看程式碼是怎麼實現的。

$.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', 'linear-gradient(to right, #059CFA, white ' + this.value + '%, white)' );

        if ($.isFunction(callback)) {
            callback(this);
        }
    });
};
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

通過cfg物件來設定滑動控制元件的min, max, step屬性。 
對控制元件繫結input事件，當滑塊滑動時會觸發該事件，此時完成對進度條的填充，這裡我使用的是線性漸變linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)這種方式，淡藍色和白色兩種顏色從左至右漸變，漸變的長度根據此時控制元件的value來確定。事件觸發時同時呼叫回撥函式，回撥函式完成的功能可自行設計。 
當然你還可以根據自己的需求來監聽其他事件，比如change事件，當value值改變時會觸發，用法上很靈活。 
如何呼叫這個js檔案裡的函式來完成配置呢？很簡單，首先在html檔案裡匯入這個js檔案，然後直接定義script節點，html程式碼如下：

<!DOCTYPE html>
<html>
    <head>
    <title>demo</title>
        <script type="text/javascript" src="lib/jquery.js"></script>
        <script type="text/javascript"src="src/RangeSlider.js"></script>
        <link rel="stylesheet" href="css/slider.css" type="text/css">
    </head>

    <body>
        <div id="test">
            <input type="range" value="0">
        </div>

        <script>
            var change = function($input) {
                /*內容可自行定義*/
                console.log("123");
            }

            $('input').RangeSlider({ min: 0,   max: 100,  step: 0.1,  callback: change});

        </script>
    </body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

至此基於Chrome瀏覽器，對滑動控制元件的美化已全部完成。最後只剩下多瀏覽器的相容問題了。

3.5 實現多瀏覽器相容

如果要相容Firefox瀏覽器，只需要把上述css程式碼中的 ::-webkit-slider-runnable-track 替換為 ::-moz-range-track ，就可以完成對軌道的美化了；把css程式碼中的 ::-webkit-slider-thumb 替換為 ::-moz-range-thumb ，這是對滑塊的樣式進行改造；而如果是要填充進度條就很簡單了，不需要像之前在RangeSlider.js中 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); 這樣實現填充，只需要新增如下的css程式碼即可：

input[type=range]::-moz-range-progress {
    background: linear-gradient(to right, #059CFA, white 100%, white);
    height: 13px;    
    border-radius: 10px;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 1
  • 2
  • 3
  • 4
  • 5

如果要想相容IE 9以上版本的瀏覽器，對上述css程式碼要修改的地方稍微多了一些，下面先將針對IE 9+的css程式碼貼出來：

input[type=range] {
    -webkit-appearance: none;
    width: 300px;
    border-radius: 10px;
}

input[type=range]::-ms-track {
    height: 25px;
    border-radius: 10px;
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112;
    border-color: transparent; /*去除原有邊框*/
    color: transparent; /*去除軌道內的豎線*/
}

input[type=range]::-ms-thumb {
    border: solid 0.125em rgba(205, 224, 230, 0.5);
    height: 25px;
    width: 25px;
    border-radius: 50%;
    background: #ffffff;
    margin-top: -5px;
    box-shadow: 0 .125em .125em #3b4547;
}

input[type=range]::-ms-fill-lower {
    /*進度條已填充的部分*/
    height: 22px;
    border-radius: 10px;
    background: linear-gradient(to right, #059CFA, white 100%, white);
}

input[type=range]::-ms-fill-upper {
    /*進度條未填充的部分*/
    height: 22px;
    border-radius: 10px;
    background: #ffffff;
}

input[type=range]:focus::-ms-fill-lower {
    background: linear-gradient(to right, #059CFA, white 100%, white);
}

input[type=range]:focus::-ms-fill-upper {
    background: #ffffff;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45

以上就是為了相容IE 9+完整的css程式碼，也不是很複雜，同樣的和Firefox瀏覽器一樣，它支援直接使用css來自定義進度條，所以原先在RangeSlider.js裡的 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); 填充方法就不需要啦。

下面提幾個IE瀏覽器需要特別注意的問題：

  1. 在測試時發現，IE瀏覽器沒有載入css檔案，導致樣式沒有發生改變，如果你的使用E瀏覽器測試時也存在這樣的問題，那麼你需要將HTML第一行的<!DOCTYPE html> 改為 <!DOCTYPE>；
  2. 拖動滑塊時，IE瀏覽器沒有觸發 input 事件，所以只能選擇將RangeSlider.js中的監聽事件改為 change 事件。

到這裡這篇文章就結束了，如果你有更好的想法，希望能告訴我，一起探討交流。希望隨著學習的深入，能為大家帶來更多有深度的文章。

更新軌道(track)顏色填充處理方式

之前針對Chrome瀏覽器做的軌道顏色填充處理，效果上不是很好，因為填充的顏色是漸變的，所以靠近滑塊那段的顏色會變淺；而且需要末段顏色和軌道最初顏色保持一致，用法不夠靈活。現在更改一下程式碼：

首先，修改css檔案中 input[type=range] 這部分內容，新增程式碼：

background: -webkit-linear-gradient(#059CFA, #059CFA) no-repeat;
background-size: 0% 100%;
  • 1
  • 2
  • 1
  • 2

因為這裡預設滑動條初始從0開始，所以數值為0%。

接下來，修改js檔案： 
將這行程式碼 $input.css( ‘background’, ‘linear-gradient(to right, #059CFA, white ’ + this.value + ‘%, white)’ ); 改為

$input.css( 'background-size', this.value + '% 100%' );
  • 1
  • 1

稍作修改後，滑動條效果如下（靠近滑塊的部分，顏色沒有變淺）： 
這裡寫圖片描述

若要相容FireFox和IE則還是隻需要CSS，不需要通過js來做填充處理，相容這個效果，FireFox只需修改 input[type=range]::-moz-range-progress 這部分；IE 9+需要修改 input[type=range]::-ms-fill-lower 和 input[type=range]:focus::-ms-fill-lower 這兩部分，改法很簡單，將 backgound 的內容替換為

background: linear-gradient(#059CFA, #059CFA) no-repeat;
  • 1
  • 1

更新關於相容IE9+瀏覽器的內容

（一）針對IE瀏覽器可能出現css無法載入，導致我們樣式沒有體現出來的問題。之前的做法是將HTML第一行的 <!DOCTYPE html> 改為 <!DOCTYPE>，這種做法不是很好，後來在網上找到了更好地解決方案，詳細內容可參考這個連結：http://www.uedsc.com/css-mime-type-mismatch.html 
這裡簡單說一下本地使用瀏覽器時的解決方案： 
① 點選[win+R]鍵，在彈出的執行視窗輸入“regedit”開啟登錄檔編輯器； 
② 找到 HKEY_LOCAL_MACHINE\SOFTWARE\Classes 下的 .css 項，確保 Content Type 為 text/css 即可。 
這裡寫圖片描述

（二）在IE瀏覽器執行程式的時候，底部可能會提示你說已限制執行指令碼，這會導致JS檔案載入不了，點選“允許阻止的內容”即可。 
這裡寫圖片描述


相關推薦

HTML5—————— 自定義(滑動條)input[type="range"]樣式

1、如何使用滑動條？ 用法很簡單，如下所示： <input type="range" value="0">11 各瀏覽器原始樣式如下：  Chrome:   Firefox:    IE 9+:        常用（部分）屬性如下： 屬性 描述 max 設定或返回滑塊控制元件的最大值

自定義(滑動條)input[type="range"]樣式

這是我的第一篇博文，也是我這個小白努力的起點。剛接觸JavaScript沒多久，如果文中有錯誤的地方歡迎大家指正，或者給予建議，讓我能逐漸向大牛靠攏。今天這篇文章給大家帶來的是關於美化Slider Bar的相關內容。Range是HTML5中新出現的滑塊控制元件，

android 開發 View _14 MotionEvent和事件處理詳解，與實踐自定義滑動條View

MotionEvent MotionEvent物件是與使用者觸控相關的時間序列，該序列從使用者首次觸控式螢幕幕開始，經歷手指在螢幕表面的任何移動，直到手指離開螢幕時結束。手指的初次觸控(ACTION_DOWN操作)，滑動(ACTION_MOVE操作)和擡起(ACTION

input type=“range”滑塊自定義樣式，實現步驟詳解及實際應用

寫在前面： 本文的主要內容包括：type="range"屬性介紹，修改range預設css樣式以及在js中的實際應用。本文面向前端小白，寫的不好之處，請多多見諒。文末有demo連結，可以自行復制到本地進行試驗。 最終要實現的效果： 其中包括一部分js程式碼

input等的data-name、data-age HTML5 自定義屬性

data-*方式來自定義屬性，data-*實際上上就是data-字首加上自定義的屬性名，使用這樣的結構可以進行資料存放。 <div id="test" data-age="24"><

自定義 input type=file樣式

這裡採用 span標籤巢狀input標籤，因為div標籤在ie裡有問題，具體參考該文章：http://www.cnblogs.com/kongxianghai/p/5624785.html 裡面很詳細，程式碼如下： <style> .filei

html5自定義數字鍵盤

blog this cal pre pan initial class function type 原理：使用div模擬輸入框，避免手機原生鍵盤彈出，鍵盤使用div模擬，點擊事件使用js控制，光標閃爍使用css模擬，具體代碼如下： 1 <!doctype html

CSS3自定義滾動條樣式 -webkit-scrollbar

play 偽類 thumb area 沒有 :link 現在 自定義滾動條 box ::-webkit-scrollbar {/*隱藏滾輪*/display: none;} 前言 webkit支持擁有overflow屬性的區域，列表框，下拉菜單，textarea的滾動條自定

每天一個JS 小demo之自定義滾動條。主要知識點：事件應用

prevent 數據 滾動 sca listener 視頻 希望 特效 poi <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D

移動端網頁自定義滾動條

max view andro move .html class height transform inner <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

HTML5自定義屬性之data-

表現 logs nbsp null dex att html5 mov 對象 HTML5 增加了一項新功能是 自定義數據屬性 ，也就是 data-* 自定義屬性。在HTML5中我們可以使用以 data- 為前綴來設置我們需要的自定義屬性，來進行一些數據的存放。當然高級瀏覽

aNDROID自定義進度條顏色

定義 hao123 自定義進度條 com list andro 顏色 androi baidu DIaLOGFRaGMENT%E9%97%AE%E9%A2%98%E6%B1%82%E8%A7%A3 http://music.baidu.com/songlist/49564

CSS3自定義滾動條樣式 之 -webkit-scrollbar

selection 單獨 窗口 請求 方塊 利用 源碼 bsp 進行 有沒有覺得瀏覽器自帶的原始滾動條很不美觀，同時也有看到很多網站的自定義滾動條顯得高端，就連chrome32.0開發板都拋棄了原始的滾動條，美觀多了。那webkit瀏覽器是如何自定義滾動條的呢？ 前言

HTML5 自定義點擊事件

[0 touch clientx ini andro tar end str ron /* 封裝的TAP事件 */ (function () { /** * IOS 和 PC 端 只需要創建

css 自定義滾動條

har scroll meta ram arr 底部 over con logs 我遇到的場景： 對於iframe窗口，自帶滾動條是整個窗口的大小。有時需要頂部或底部固定，則滾動條不應該觸碰到頂部或底部。 那麽首先打開iframe時應該去掉滾動條 scrolling="no

自定義滾動條

nbsp 自定義 images 得到 scrolltop sem 自定義滾動條 項目 demo 項目地址:https://pan.baidu.com/s/1c2LEXlm 業余時間寫了一個自定義滾動條 主要是利用scrollTop和scrollLeft這兩個屬性來控制內部

css3自定義滾動條

enter ott char overflow htm har ado solid lang <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">

css自定義滾動條樣式，自定義文字選擇樣式，設置文字不被選擇

sed 分享 play gpo radi https cal hid 右移 ::-webkit-scrollbar 滾動條整體部分 ::-webkit-scrollbar-thumb 滾動條裏面的小方塊，能向上向下移動（或往左往右移動，取決於是垂直滾動條還是水平滾動條）

js自定義滾動條

span get class src ffd osi down width eth 今天聽到別人說自定義滾動條，所以就在吃飯的時間寫了個 html部分 <div class="out" id="out"> <div class="inn

HTML自定義滾動條（仿網易郵箱滾動條）轉載

基本上 fma 內容 scrollbar color http code %20 water 它是使用CSS中的偽元素來實現的，主要由以下三個來完成： 1. -webkit-scrollbar：定義滾動條的樣式，如長寬。 2. -webkit-scrollbar-thumb