首先HTML代码:
<input id="snrPollInterval" type="range" min="1" max="30">
css代码:
input[type="range"] { /*-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;*/ -webkit-appearance: none; /*去除默认样式*/ margin-top: 42px; background-color: #ebeff4; /*border-radius: 15px;*/ width: 80% !important; -webkit-appearance: none; height:4px; padding: 0; border: none; /*input的长度为80%,margin-left的长度为10%*/ } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none;/*去除默认样式*/ cursor: default; top: 0; height: 20px; width: 20px; transform: translateY(0px); /*background: none repeat scroll 0 0 #5891f5;*/ background: #fff; border-radius: 15px; border: 5px solid #006eb3; /*-webkit-box-shadow: 0 -1px 1px #fc7701 inset;*/ }
效果如下:
拖动的时候,颜色从左往右变化,此处用了jQuery,注意引入jQuery
//滑动时的样式 $.fn.RangeSlider = function(cfg){ this.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 $input = $(this); var min = this.sliderCfg.min; var max = this.sliderCfg.max; var step = this.sliderCfg.step; var callback = this.sliderCfg.callback; $input.attr('min', min) .attr('max', max) .attr('step', step); $input.bind("input", function(e){ $input.attr('value', this.value); $input.css( 'background', 'linear-gradient(to right, #059CFA, #ebeff4 ' + this.value + '%, #ebeff4)' ); if ($.isFunction(callback)) { allback(this); } }); }; $('#snrPollInterval').RangeSlider({ min: 0, max: 100, step: 1, callback: ''});//#snrPollInterval为input的id名
效果图如下: