jQuery和CSS3箭头式滑块特效
代码简介
这是一款jQuery和CSS3箭头式滑块特效。该特效通过jquery和CSS对input range进行改造，制作出箭头样式的滑块。
浏览器兼容
Chrome、 Opera、 Safari、Opera、IE10+
使用方法
1. 引入文件：
<linkhref="css/bootstrap.min.css"rel="stylesheet">
<scripttype="text/javascript"src="js/jquery.min.js"></script>
2. html：
<divclass="container">
<divclass="row pad-15">
<divclass="col-md-offset-2 col-md-8">
<divclass="range-slider">
<inputtype="range"value="150"min="0"max="500">
<spanclass="range-value">0</span>
</div>
<divclass="range-slider">
<inputtype="range"value="280"min="0"max="500">
<spanclass="range-value">0</span>
</div>
<divclass="range-slider">
<inputtype="range"value="360"min="0"max="500">
<spanclass="range-value">0</span>
</div>
</div>
</div>
</div>
3. css：
.range-slider{margin:50px000; }
.range-slider input[type="range"]{
width: calc(100%- (68px));
height:8px;
background: rgba(195,195,195,0.4);
outline:none;
float:left;
-webkit-appearance:none;
position:relative;
}
.range-slider input[type="range"]::-webkit-slider-thumb{
width:35px;
height:35px;
background:#fab403;
cursor:pointer;
-webkit-appearance:none;
appearance:none;
-webkit-clip-path: polygon(0%20%,60%20%,60%0%,100%50%,60%100%,60%80%,0%80%);
clip-path: polygon(0%20%,60%20%,60%0%,100%50%,60%100%,60%80%,0%80%);
transition:all0.15s ease-in-out0s;
}
.range-slider input[type="range"]::-webkit-slider-thumb:hover,
.range-slider input[type="range"]:active::-webkit-slider-thumb{background:#0deccf; }
.range-slider input[type="range"]::-moz-range-thumb{
width:35px;
height:35px;
background:#fab403;
cursor:pointer;
-webkit-clip-path: polygon(0%20%,60%20%,60%0%,100%50%,60%100%,60%80%,0%80%);
clip-path: polygon(0%20%,60%20%,60%0%,100%50%,60%100%,60%80%,0%80%);
transition:all0.15s ease-in-out0s;
}
.range-slider input[type="range"]::-moz-range-thumb:hover,
.range-slider input[type="range"]:active::-moz-range-thumb{background:#0deccf; }
.range-slider .range-value{
display:inline-block;
width:50px;
height:50px;
background:#0a0a0a;
margin-left:8px;
font-size:18px;
font-weight:600;
color:#fff;
line-height:40px;
text-align:center;
position:relative;
top:-13px;
-webkit-clip-path: polygon(0%0%,100%0%,100%75%,75%75%,75%100%,50%75%,0%75%);
clip-path: polygon(0%0%,100%0%,100%75%,75%75%,75%100%,50%75%,0%75%);
}
::-moz-range-track{
background:transparent;
border:0;
}
4. js：
$(document).ready(function(){
varrangeSlider =function(){
varslider = $('.range-slider'),
range = $('.range-slider input[type="range"]'),
value = $('.range-value');
slider.each(function(){
value.each(function(){
varvalue = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input',function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
});
