Input type = range Style Optimization, inputrange

Input type = range Style Optimization, inputrange

First, the HTML code:

　　

1 <input id="snrPollInterval" type="range" min="1" max="30">

Css code:

　　

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;/* remove the default style */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/* The input length is 80%, margin-left is 10% */14} 15 input [type = "range"]:-webkit-slider-thumb {16-webkit-appearance: none; /* remove the default style */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}

The effect is as follows:

　　

 

 

When dragging, the color changes from left to right. jQuery is used here.

　　　　

1 // sliding style 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 bytes 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 indicates the input id.

 

As follows: