在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

jQuery和CSS3箭头式滑块特效

分类:插件代码 更新时间:2018-09-25 浏览次数:179

代码简介

这是一款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();
});         

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!