美化input type=range標籤滑動樣式（帶漸變效果）

input原來的樣式就不在此贅述了：

下面看一下實際項目中用到的input輸入框，同步綁定輸入數據，實現輸入框雙向綁定（實際項目中使用的是vue框架）：

html部分：

<div class="inputRatio">

滑動條：<input type="range"  name="ratio" :value="parseInt(ratio)" @input="ratio=$event.target.value"  :style="{background:'linear-gradient(to right, #059CFA, #ebeff4 ' + ratio + '%, #ebeff4)'}"/>
//這裏經過漸變來改變滑動軌跡的樣式，下面有補充漸變的簡單示例
輸入框：<input type="text" maxlength="3" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');this.value=this.value>100?100:this.value;" v-model="ratio" />%

</div>

樣式優化：

 

/*實際項目中1rem=14px*/
.inputRatio input {
    width: 42.86rem;
    display: inline-block;
    height: 0.86rem;
    line-height: 1.92rem;
}

.inputRatio input:last-child {
    width: 3.57rem;
    height: 2.14rem;
    margin: 0 0.24rem 0 2rem;
    color: #66b4fe;
    font-size: 1.28rem;
    text-align: center;
    background-color: #EEEEEE;
}

.inputRatio input[type="range"] {
    background-color: #EEEEEE;
    border-radius: 0.48rem;
    -webkit-appearance: none;
}
/*這是滑動按鈕的樣式*/
.inputRatio input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    cursor: default;
    height: 1.92rem;
    width: 1.92rem;
    transform: translateY(0px);
    background: none repeat scroll 0 0 #66b4fe;
    border-radius: 0.96rem;
}

.inputRatio input[type='range']:focus {
    outline: none;
}

 最後的效果：

 

 

另：補充linear-gradient()用法示例

css部分：

width: 200px;
height: 100px;
margin-top: 10px;
border: 1px solid #ddd;
}
.test {
background: linear-gradient(#fff, #333);
}
.test2 {
background: linear-gradient(#000, #f00 50%, #090);
}
.test3 {
background: linear-gradient(0deg, #000 20%, #f00 50%, #090 80%);
}
.test4 {
background: linear-gradient(45deg, #000, #f00 50%, #090);
}
.test5 {
background: linear-gradient(to top right, #000, #f00 50%, #090);
}

 

html部分：

<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>

輸出效果：

 

 

注：本文爲原創，如需轉載請註明出處http://www.cnblogs.com/hubgit/p/8949847.html ，謝謝！