做了一个类似于阿里云弹性计算中的滑块效果，可以自由滑动滑块，并且计算刻度。基于jQuery实现，小伙伴们不要忘记载入jquery哦

半铸钢钢性铸铁(铸造半钢)。主{ margin: 0 auto边距-top : 100 px；宽度： 500像素；字体系列：微软雅黑；-网络工具包-用户-选择：无；}.包含{宽度： 500像素高度： 40px背景色-: # E8E 8 E8；}.轨道{ width: 16px高度： 46px绝对位置：边距：-3px 0 0 0px；背景-彩色： # 2d交流D1；光标：指针；}.valueC { height: 40px绝对位置：保证金： 0；背景-color : # 43 bfe 3；}.值span {位置：绝对值；文本对齐：右侧；高度： 40px线高： 40px颜色： # 808080边框-右侧： 1px实心# dddddd}。显示{ width: 45pxheight: 30px背景色： # 333;color: # fff文本对齐：中心；线高： 30px绝对位置：opacity: 0.9边距-top :-38px；左边距：-15px；}HTML

div class=' main ' div class=' contain ' div class=' show ' 0/div class=' valueC '/div class=' value '/div class=' track '/div/div js

脚本类型=' text/JAVAScript ' src=' http :/js/jquery-1。8 .0 .量滴js '/脚本脚本类型=' text/JavaScript ' $(function(){ scroller track .init()；});var scroller track={ body width :500，MaxValue:300，CurrentX:0，CurrentValue:0，Count:0，init : function(){ var mWidth=scroller track .BodyWidth$('。包含')。css('width '，mWidth ' px ')；var count=ScrollerTrack .MaxValue/50；ScrollerTrack .计数=计数；var ItemWidth=Mwidth/count；for(var I=0；icountI){ var span=$(' span '(I 1)* 50 '/span ')；$(跨度)。css('width '，itemWidth 'px ').css(“”左边距，I * ItemWidth ' px ')；$('.值')。追加(跨度)；}滚动跟踪.value()；}，值： function(){ var CurrentValue；var isMoving=falseScrollerTrack .CurrentX=$(' .轨道')。偏移量()。向左；$('.轨道')。鼠标向下(function(){ var target=$(this)).parent()；isMoving=true$('html，body ').鼠标移动(函数（事件){ if(isMoving==false)返回；var changeX=事件。客户端x-scroller跟踪.currentxtcurrentvalue=changeX-scroller跟踪.CurrentXif(changeX=0){ $(目标)。查找('。轨道')。css(“”左边距，' 0px ')；$(目标)。查找('。valueC’).css('width '，' 0px ')；$(目标)。查找('。显示').css(“”左边距，'-15px ')；$(目标)。查找('。显示').html(0)；ScrollerTrack .CurrentValue=0；} else if(changeX=ScrollerTrack .BodyWidth-16){ $(目标)。查找('。轨道')。css(“”左边距，ScrollerTrack .车身宽度-16 ' px '；$(目标)。查找('。valueC’).css('width '，ScrollerTrack .车身宽度-16 ' px '；$(目标)。查找('。显示').css(“”左边距，ScrollerTrack .车身宽度-31 ' px '；$(目标)。查找('。显示').html(ScrollerTrack .MaxValue)；ScrollerTrack .CurrentValue=ScrollerTrack .MaxValue} else{ $(目标)。查找('。轨道')。css(“”左边距，ChangeX ' px ')；$(目标)。查找('。valueC’).css('width '，changeX ' px ')；$(目标)。查找('。显示').css('margin-left '，changeX-15 ' px ')；var v=ScrollerTrack .最大值*(ChangeX 16)/滚动轨道.车身宽度)；$(目标)。查找('。显示').html(ParSeint(v))；ScrollerTrack .CurrentValue=ParSeint(v)；} });});$('html，body ').鼠标上移(function(){ Ismoving=false；});} }/脚本演示图：

演示地址：http://演示。JB 51。net/js/2015/jquery-txhk/

另外推荐一款范围选择器插件jRange，它是基于jQuery的一款简单插件。下面我们来看下插件jRange的使用。

超文本标记语言首先载入jQuery库文件以及jRange相关的钢性铸铁文件：jquery.range.css和插件：jquery.range.js

脚本src=' http : jquery。js /脚本链接rel='样式表href='jquery.range.css '脚本src=' http : jquery。范围。js /脚本然后在需要展示滑块选择器的位置放入以下代码：

输入类型='隐藏'类='滑块-输入'值='23' /我们使用了希尔登类型的文本域，设置默认值价值，如23。

jQuery

调用jRange插件非常简单，直接用下面的代码：

$('.单滑块')。jRange({ 0从： 0,到： 100，step: 1，scale: [0，25，50，75，100]，format: ' % s '，width: 300，showLabels: true，showscale : true })；更多信息请参阅jRange项目官网：https://github。com/nitinhayaran/jRange