HTML5 Drag the Slider

HTML5 input has an increase of type=range. This provides a great convenience for dragging sliders. Here are his attributes:

<! DOCTYPE html>"en">"UTF-8"> <title>Title</title> <style>. main{position:relative;width:500px;} #range {-webkit-Appearance:none; Background: #999;            height:3px;            Outline:none; Margin:0;        width:500px; } Input[type=range]::-webkit-slider-thumb{-webkit-Appearance:none;            width:20px;            height:20px; Border-radius: -%;        background:red;            } p{Position:absolute;            width:0px;            height:3px;            Background:green; Top:-2px; Left:0;        }. range{position:relative;            }. value{padding:10px;            Background: #ffebc7; Font-size:40px; Text-Align:center; Margin:0Auto; }    </style>class="Main"> <divclass="value"></div> <divclass="Range"> <input type="Range"max="Ten"min="0"Id="Range"step="0.1"Value="0"> <p></p> </div></div></body><script src="Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script>    $(". Value"). HTML ("0")    varRangeswitch=function () {varx=$ ("#range"). Val (); $("P"). CSS ({"width":(x/Ten)* -*0.96})//multiply by 0.96 because otherwise the green color will have partially covered sliding button (500-20)/500=0.96; $(". Value"). HTML (x)} $ ("#range"). On ("input", Rangeswitch)</script>
HTML5 Drag the Slider