input range样式优化
首先HTML代码：
1 <input id="snrPollInterval" type="range" min="1" max="30">
css代码：
1 input[type="range"] { 2 /*-webkit-box-shadow: 0 1px 0 0px #424242, 0 1px 0 #060607 inset, 0px 2px 10px 0px black inset, 1px 0px 2px rgba(0, 0, 0, 0.4) inset, 0 0px 1px rgba(0, 0, 0, 0.6) inset;*/ 3 -webkit-appearance: none; /*去除默认样式*/ 4 margin-top: 42px; 5 background-color: #ebeff4; 6 /*border-radius: 15px;*/ 7 width: 80% !important; 8 -webkit-appearance: none; 9 height:4px; 10 padding: 0; 11 border: none; 12 13 /*input的长度为80%，margin-left的长度为10%*/ 14 } 15 input[type="range"]::-webkit-slider-thumb { 16 -webkit-appearance: none;/*去除默认样式*/ 17 cursor: default; 18 top: 0; 19 height: 20px; 20 width: 20px; 21 transform: translateY(0px); 22 /*background: none repeat scroll 0 0 #5891f5;*/ 23 background: #fff; 24 border-radius: 15px; 25 border: 5px solid #006eb3; 26 /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/ 27 }
效果如下：
拖动的时候，颜色从左往右变化，此处用了jQuery，注意引入jQuery
1 //滑动时的样式 2 $.fn.RangeSlider = function(cfg){ 3 this.sliderCfg = { 4 min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null, 5 max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null, 6 step: cfg && Number(cfg.step) ? cfg.step : 1, 7 callback: cfg && cfg.callback ? cfg.callback : null 8 }; 9 10 var $input = $(this); 11 var min = this.sliderCfg.min; 12 var max = this.sliderCfg.max; 13 var step = this.sliderCfg.step; 14 var callback = this.sliderCfg.callback; 15 16 $input.attr('min', min) 17 .attr('max', max) 18 .attr('step', step); 19 20 $input.bind("input", function(e){ 21 $input.attr('value', this.value); 22 $input.css( 'background', 'linear-gradient(to right, #059CFA, #ebeff4 ' + this.value + '%, #ebeff4)' ); 23 24 if ($.isFunction(callback)) { 25 callback(this); 26 } 27 }); 28 }; 29 $('#snrPollInterval').RangeSlider({ min: 0, max: 100, step: 1, callback: ''});//#snrPollInterval为input的id名
效果图如下：
