前端插件之原生js写range组件

来源：互联网发布：新浪微博seo 编辑：程序博客网时间：2024/06/06 05:55

效果图：

我们先写一个range组件：<input type="range" max="12" min="0" value="6" step="1" class="slider-block" id="sliderblock">

流程是：1.css部分，去掉默认样式

    outline: none; /*去掉点击时出现的外边框*/            -webkit-appearance: none;            -moz-appearance: none;            appearance: none; /*这三个是去掉那条线原有的默认样式，划重点！！*/            width: 100%;            height: 2px;            background: #ccc; /*这三个是设置滑块下面那条线的样式*/            position: relative;        }

2.定义背景色：

input[type=range]:focus {    outline: none;}input[type=range]{    background: linear-gradient(#059CFA, #059CFA) no-repeat;background-size: 50% 100%;}

3.change函数是改变value值就会调用的方法，RangeSlider方法是我们需要写的自定义的方法，

var change = function($input) {        /*内容可自行定义*/        console.log($input.value);    }    var sliderblock= document.getElementById("sliderblock");    RangeSlider({ min: 0,   max: 12,  step: 1,  callback: change},sliderblock);

4.在自定义方法里我们要做的是：设置min。max，step，callback毁掉函数，以及输入input

uu.setAttribute('min', min);    uu.setAttribute('max', max);    uu.setAttribute('step', step);

5.通过oninput方法，来动态设置input的value值

uu.setAttribute('value', this.value);

6.我的这个range组件是分为12份的，通过设置backgroudsize结合css就可以把按钮左边的颜色搞定，右边的我弄了一个默认的;

.slider-block:after{content: "";width: 100%;height: 2px;position: absolute;left: 0;top: 0;background: #CCCCCC;z-index: -1; }

默认灰色，左边的是蓝色，line线是定位在上边的，循环判断并改变颜色；

var a = this.value/12 *100;        uu.style.backgroundSize = a + '% 100%';        var value = this.value;        for (var i=0;i<aspan.length;i++) {        (function(index){        if(index < value ){        aspan[index].style.backgroundColor="#059CFA";        }else{        aspan[index].style.backgroundColor="#CCCCCC";        }        })(i)        };

好了，大概就是这么多，下面附上完整代码：

html部分：

<div class="range_content"><span class="min">0</span><span class="max">6h</span><div class="range_inner" id="range_innerid"><input type="range" max="12" min="0" value="6" step="1" class="slider-block" id="sliderblock"><span class="rangeline rangeline1"></span><span class="rangeline rangeline2"></span><span class="rangeline rangeline3"></span><span class="rangeline rangeline4"></span><span class="rangeline rangeline5"></span><span class="rangeline rangeline6"></span><span class="rangeline rangeline7"></span><span class="rangeline rangeline8"></span><span class="rangeline rangeline9"></span><span class="rangeline rangeline10"></span><span class="rangeline rangeline11"></span><span class="rangeline rangeline12"></span><span class="rangeline rangeline13"></span></div></div>

css部分：

*{margin:0;padding:0}li{list-style:none}img{vertical-align:top;border:none}    .range_inner{    width: 100%;position: relative;height: 30px;        padding-top: 20px;    }    .rangeline{position: absolute;width: 1px;height: 14px;bottom: -7px;background: #CCCCCC;}    .rangeline1{left: 0%;background-color:#059CFA}    .rangeline2{left: 8.33%;background-color:#059CFA}    .rangeline3{left: 16.67%;background-color:#059CFA}    .rangeline4{left: 25%;background-color:#059CFA}    .rangeline5{left: 33.33%;background-color:#059CFA}    .rangeline6{left: 41.67%;background-color:#059CFA}    .rangeline7{left: 50%;}    .rangeline8{left: 58.33%;}    .rangeline9{left: 66.67%;}    .rangeline10{left: 75%;}    .rangeline11{left: 83.33%;}    .rangeline12{left: 91.67%;}    .rangeline13{left: 100%;}    .slider-block{            outline: none; /*去掉点击时出现的外边框*/            -webkit-appearance: none;            -moz-appearance: none;            appearance: none; /*这三个是去掉那条线原有的默认样式，划重点！！*/            width: 100%;            height: 2px;            background: #ccc; /*这三个是设置滑块下面那条线的样式*/            position: relative;        }        .slider-block:after{        content: "";        width: 100%;        height: 2px;        position: absolute;        left: 0;top: 0;        background: #CCCCCC;        z-index: -1;        }    input[type=range]:focus {    outline: none;}input[type=range]{    background: linear-gradient(#059CFA, #059CFA) no-repeat;background-size: 50% 100%;}         .range_content{        width: 90%;margin-left: 5%;height: 50px;position: relative;line-height: 50px;        }.min{position: absolute;top: 0;left: 0;line-height: 20px;}.max{position: absolute;top: 0;right: 0;line-height: 20px;}

js部分：

<script>var RangeSlider = function(cfg,uu){    uu.sliderCfg = {        min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,         max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,        step: cfg && Number(cfg.step) ? cfg.step : 1,        callback: cfg && cfg.callback ? cfg.callback : null    };    var min = uu.sliderCfg.min;    var max = uu.sliderCfg.max;    var step = uu.sliderCfg.step;    var callback = uu.sliderCfg.callback;    var range_inner=document.getElementById("range_innerid");    aspan = range_inner.getElementsByTagName("span");    uu.setAttribute('min', min);    uu.setAttribute('max', max);    uu.setAttribute('step', step);    uu.oninput= function(e){        uu.setAttribute('value', this.value);        var a = this.value/12 *100;        uu.style.backgroundSize = a + '% 100%';        var value = this.value;        for (var i=0;i<aspan.length;i++) {        (function(index){        if(index < value ){        aspan[index].style.backgroundColor="#059CFA";        }else{        aspan[index].style.backgroundColor="#CCCCCC";        }        })(i)        };        if (typeof(callback) == 'function') {            callback(this);        }    };};</script><script>    var change = function($input) {        /*内容可自行定义*/        console.log($input.value);    }    var sliderblock= document.getElementById("sliderblock");    RangeSlider({ min: 0,   max: 12,  step: 1,  callback: change},sliderblock);</script>

阅读全文

0 0