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

曾经终败给现在 2022-06-09 10:21 411阅读 0赞

效果图：![20170903173542777][]

我们先写一个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线是定位在上边的，循环判断并改变颜色；

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

html部分：

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部分：

[20170903173542777]: /images/20220609/22aa35f511cd419b80189b8fc1322990.png