寫在前面：
本文的主要內容包括：type="range"屬性介紹，修改range預設css樣式以及在js中的實際應用。本文面向前端小白，寫的不好之處，請多多見諒。文末有demo連結，可以自行復制到本地進行試驗。
相關：自定義 range radio select的樣式滑輪，按鈕，選擇框
最終要實現的效果：
步驟：
1.range屬性相關介紹
2.搭建html結構；
3.css樣式修改，包括給滑動軌道新增樣式、給滑塊新增樣式；
4.新增相關js程式碼實現應用效果;
5.關於瀏覽器相容。
在html裡面輸入如下內容，即可使用：
<input type="range">//這是最粗糙的使用方式複製程式碼range在各個瀏覽器中的預設樣式：
range屬性相關：
range 輸入型別用於應該包含指定範圍值的輸入欄位。
range 型別顯示為滑塊。
您也可以設定可接受數字的範圍限制：
<input type="range" name="points" min="1" max="10" />//max為最大的值，min為最小的值複製程式碼html5 range 型別的限定：
HTML DOM Input Range 物件（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.上面中，程式碼註釋已經註釋的很清楚了，不明白的多看幾遍程式碼，然後也可以百度一下相關屬性之類的。
3.滑塊裡面設定value="6"的作用是瀏覽器進入時候滑塊在最小值，也就是最左側的地方，否則預設在中間
4.step="1"意思是，滑塊每次動態改變的數值。
5.關於程式碼中js部分，還沒學js的小夥伴們，可以跳過，不影響修改滑塊的預設樣式的。
css樣式修改：
下面是玩家人數的css樣式（不重要，可以跳過）：
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的填充效果，沒研究清楚，可能過段時間會再回來更新。（有興趣的小夥伴可以研究一下，相互交流交流。）
以下是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