range滑塊自定義樣式，步驟詳解以及實際應用

時間  2019-11-24
標籤 range 滑塊 自定義 樣式 步驟 詳解 以及 實際應用 简体版
原文   原文鏈接

寫在前面：

本文的主要內容包括：type="range"屬性介紹，修改range默認css樣式以及在js中的實際應用。本文面向前端小白，寫的很差之處，請多多見諒。文末有demo連接，能夠自行復制到本地進行試驗。javascript

相關：自定義 range radio select的樣式滑輪，按鈕，選擇框css

最終要實現的效果：

其中包括一部分js代碼

步驟：

1.range屬性相關介紹

2.搭建html結構；

3.css樣式修改，包括給滑動軌道添加樣式、給滑塊添加樣式；

4.添加相關js代碼實現應用效果;

5.關於瀏覽器兼容。

在html裏面輸入以下內容，便可使用：

<input type="range">//這是最粗糙的使用方式複製代碼

range在各個瀏覽器中的默認樣式：

range屬性相關：

range 輸入類型用於應該包含指定範圍值的輸入字段。
range 類型顯示爲滑塊。
您也能夠設置可接受數字的範圍限制：html

<input type="range" name="points" min="1" max="10" />//max爲最大的值，min爲最小的值複製代碼

html5 range 類型的限定：

html5關於range的屬性

HTML DOM Input Range 對象（js獲取dom）

js獲取dom能夠看看，到時能夠查閱相關資料

搭建html結構：

<div class="js-2-1section3">
    <div class="js-2-1section3-div1"> <span class="js-2-1section3-div1-span1">玩家人數</span> <input type="text" class="player-num" id="player" value="6" max="18" min="6" onblur="on_change()"> <!--onblur是當對象失去焦點的時候執行的函數--> <span class="js-2-1section3-div1-span1">人</span> </div><!--上面這部分是玩家人數方框的html--> <div class="js-2-1section3-div2"> <button class="btn-sub" id="btnSub" onclick="less()" ></button><!--減value的按鈕--> <input type="range" class="slider-block" id="slider" max="18" min="6" step="1" value="6" onchange="moveChange()"> <!--onchange是當對象發生變化時執行的函數--> <button class="btn-add" id="btnAdd" onclick="plus()"></button><!--加value的按鈕--> </div> </div>複製代碼

解析：

1.考慮到文章篇幅，html其餘標籤自行補全。前端

2.上面中，代碼註釋已經註釋的很清楚了，不明白的多看幾遍代碼，而後也能夠百度一下相關屬性之類的。html5

3.滑塊裏面設置value="6"的做用是瀏覽器進入時候滑塊在最小值，也就是最左側的地方，不然默認在中間java

4.step="1"意思是，滑塊每次動態改變的數值。git

5.關於代碼中js部分，還沒學js的小夥伴們，能夠跳過，不影響修改滑塊的默認樣式的。github

再放一下最終實現的效果，省的翻頁麻煩

css樣式修改：

下面是玩家人數的css樣式（不重要，能夠跳過）：web

body{
            width: 50%;
            margin:5rem auto 0;
        }
        div{
            margin: 2rem;
        }
        .js-2-1section3{
            background: #fff;}
        .js-2-1section3-div1{
            margin-left: 2rem;}
        .player-num{
            font-size: 1.8rem;
            margin:0 0.6rem;
            background: #f4f5f5;
            padding: 0.2rem 0.6rem;
            color: gold;
            width: 9%;
            border: none;
            outline: none;
        }
        span{
            display: inline-block;
            font-size: 1.8rem;
            color: #444;
        }

        .js-2-1section3-div2{
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 1.6rem 0;
        }

        /*上面是玩家人數的css樣式*/複製代碼

修改滑塊樣式的css代碼(重點)：

#slider{ /*設置滑塊下面那條線的樣式*/
            outline: none; /*去掉點擊時出現的外邊框*/
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /*這三個是去掉那條線原有的默認樣式，劃重點！！*/
            width: 30%;
            height: 0.3rem;
            background: orange;
            /*這三個是設置滑塊下面那條線的樣式*/
        }
        input[type="range"]::-webkit-slider-thumb {
            /*::-webkit-slider-thumb是表明給滑塊的樣式進行變動*/
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none; /*//這三個是去掉滑塊原有的默認樣式，劃重點！！*/
            -webkit-box-shadow:0 0 2px ; /*設置滑塊的陰影*/
            width: 2.6rem;
            height:1.6rem;
            background: url("images/js2-d_03.png");
            background-size: cover;
            /*//這幾個是設置滑塊的樣式*/
        }
        <!--上面是修改滑塊和滑塊軌道的樣式，下面是左右兩邊按鈕的css樣式-->

        .btn-sub{ /*這裏是左邊減按鈕的css樣式*/
            outline: none;
            border: none;
            cursor: pointer;
            background: url("images/js2-f_03.png");
            background-size: 100%;
            width: 1.8rem;
            height: 1.8rem;
        }
        .btn-add{ /*這裏是右邊+按鈕的css樣式*/
            outline: none;
            border: none;
            cursor: pointer;
            background: url("images/js2-e_03.png") no-repeat;
            background-size: 100%;
            width: 1.8rem;
            height: 1.8rem;
        }
    <!--css代碼寫的有點亂，見諒啊。-->複製代碼

解析：

1.代碼註釋裏面已經很清楚了，不清楚多看幾遍代碼。
2.文末有demo連接，能夠自行復制到本地進行試驗。瀏覽器

以上是修改css樣式到上面放的圖片效果。

擴展：使用js完成實際應用

var oPlayerNum = document.getElementById("player");//玩家總人數
    var osliderBlock = document.getElementById("slider");//滑塊的值
    function on_change() {
        if (oPlayerNum.value >= 6 && oPlayerNum.value <= 18) {//設置方框裏面玩家人數範圍
            osliderBlock.value=oPlayerNum.value ;//將玩家總人數賦值給滑塊的值，實現動態變化
        } else {
            alert("請輸入正確的人數6~18");
            oPlayerNum.value=6;
            osliderBlock.value=6;
    //人數超出範圍的話，彈出警告框，而且將方框和滑塊的值重置爲6
        }
    }
    function moveChange() {// 滑塊的值改變，運行這個函數
        oPlayerNum.value=osliderBlock.value;
        //滑塊的值改變的話，滑塊的值賦值給方框，實現動態變化
    }
    function less() {
        oPlayerNum.value--;
        //減的按鈕，減掉玩家總人數的值 
        if (oPlayerNum.value<6){
            alert("人太少了，再找幾個小夥伴來吧");
            oPlayerNum.value=6;
            //人數超出範圍的話，彈出警告框，而且將方框和滑塊的值重置爲6
        }
        else {
            osliderBlock.value=oPlayerNum.value;// 將玩家人數賦值給滑輪的值
        }
    }
    function plus() {
        oPlayerNum.value++;
        //加的按鈕，減掉玩家總人數的值，上面的值已經相互關聯了，因此方框的值改變，滑塊的值也會改變 
        if (oPlayerNum.value>18){
            alert("人太多了，能夠分一批人再開一局");
            oPlayerNum.value=18;
            //人數超出範圍的話，彈出警告框，而且將方框和滑塊的值重置爲18
        }
        else {
            osliderBlock.value=oPlayerNum.value;// 將玩家人數賦值給滑輪的值
        }
    }複製代碼

ps：
1.特意從新再打一遍註釋，註釋裏面說的蠻清楚了，還沒學js的小夥伴別灰心，先mark起來，等之後學會了，再回頭看看。
2.文末有demo連接，能夠自行復制到本地進行試驗。

關於瀏覽器兼容的問題：還未完成的效果，滑塊填充效果。

ps：關於瀏覽器兼容這塊兒，還沒研究好（下面有篇文章是講瀏覽器兼容的）。以上只針對谷歌瀏覽器，由於range是html5新出的屬性，w3c還沒出標準屬性，各個瀏覽器的方法不同，這塊兒有點麻煩。但我記在筆記裏面了，從此研究清楚了，再回來更文。

三個瀏覽器的不一樣效果

關於滑塊的填充效果，各個瀏覽器都不同 Chrome瀏覽器中不支持直接設置進度條，要藉助js。而在IE 9以上的瀏覽器中可使用::-ms-fill-lower 和 ::-ms-fill-upper來自定義進度條；在Firefox瀏覽器中則能夠經過::-moz-range-progress來自定義；今天下午研究了一陣子，只弄出了一個ie的填充效果，沒研究清楚，可能過段時間會再回來更新。（有興趣的小夥伴能夠研究一下，相互交流交流。）

IE演示的

如下是I兼容E瀏覽器的滑塊

/*如下是I兼容E瀏覽器的滑塊，還有一些問題，不過如今沒空再弄了。等到有空了再解決清楚。*/
        input[type=range]::-ms-fill-lower {//::-ms-fill-lower這是ie兼容range的屬性寫法下面那個同理
            /*進度條已填充的部分*/
            height: 22px;
            border-radius: 10px;
            /*background: black;*/
            background: linear-gradient(to right, #059CFA, white 100%, white);
        }

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

這裏有篇關於range的文章，裏面有瀏覽器兼容的內容，我沒弄清楚：自定義(滑動條)input[type="range"]樣式

range-demo連接：obkoro1.github.io/article-dem…

後話：

昨天說好的要詳細更新，range、radio、select這三類的文章，今天如約更好了range部分，後面幾天應該還會持續更文。不說了，要打球去了^_^。

最後：但願看完的朋友點個喜歡，也能夠關注一下我，如今這階段基本上每月都不會少於十五篇文章（看到乾貨我也會進行分享）。寫的很差之處，歡迎指點。碼字不易，感謝支持！
ps：目前待業，座標北京，求推薦工做。而後但願我寫哪方面的文章能夠在底下評論，或者是私信我，雖然寫的很差，但我就當這是記錄本身成長的一種方式咯。（前提是我會了，若是不會我也會記下來，等會了的時候再更出來。）
掘金我的主頁 ，簡書主頁連接，csdn博客主頁連接 ，github 。

以上。2017.4.16

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程