jQuery拖动滑块选值特效

书写hmtl代码。

初始化css代码。

书写css代码。.srs{display:block;width:100%;margin:20px auto;padding:20px;font-size:16px}.srs-slider{position:relative;margin:55px auto;display:block;width:100%;height:50px;-we  bkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.srs-slider::before,.srs-slider::after{content:'';display:table}.srs-slider::after{clear:both}.srs-track{position:absolute;left:40px;right:40px;top:25px;height:2px;background:#e9e9e9}.srs-thumb{position:absolute;top:-25px;width:50px;height:50px;color:#fff;font-size:18px;background:#333;text-align:center;border-radius:50%;cursor:ew-resize}.srs-thumb span{position:absolute;top:50%;left:50%;-we  bkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.srs-bubble{position:absolute;top:-35px;left:25px;}.srs-bubble span{padding:5px 15px;display:inline-block;font-size:25px;color:#bdc3c3;background:#343a3a;border-radius:5px}.srs-bubble:before{content:'';background:#343a3a;position:absolute;left:50%;bottom:-25px;margin-left:-5px;width:10px;height:10px;-we  bkit-transform:rotate(45deg);transform:rotate(45deg)}.srs-minus{position:relative;float:left}.srs-plus{position:relative;float:right}.srs-minus,.srs-plus{top:10px;width:30px;height:30px;color:#333;font-size:18px;border:2px solid #e9e9e9;border-radius:50%;cursor:pointer}.srs-minus span{position:absolute;top:45%;left:50%;-we  bkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.srs-plus span{position:absolute;top:50%;left:50%;-we  bkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}

代码整体结构。

查看效果。