jQuery实现移动端滑块拖动选择数字效果

本文为大家分享了基于jquery用户界面实现的一个精美实用的效果，可以通过鼠标拖拽滑动效果来选择数字，供大家参考，具体内容如下

运行效果图：

实现代码：

html xmlns=' http://www。w3。org/1999/XHTML ' hearta charset=' GB 2312 ' title demo/title link rel='样式表href=' http://代码。jquery。com/ui/1。10 .4/主题/平滑/jquery-ui。CSS的风格.滑块盒{ background : # F0EFEBfont-family : Microsoft雅黑；填充-bottom:10px} .滑块盒。项目{ padding:10px } .滑块盒。项目。标签。滑块盒。项目。滑块，滑块盒。项目val { float:left右边距：18px} .滑块盒。项目。滑块{ width:400px} .滑块盒。项目。滑块div { background : # 8fbf 0 bborder : none height :0.5 emmargin-top :0.5 em } .滑块盒。项目。滑块div .ui-slider-handle {背景： # F4F3F 1；宽度：1毫米；高度：1毫米；边框半径：1em} .滑块盒。项目瓦尔.输入{ border : none border-bottom :1 px实心# ABADA8背景：无；padd :0.1 em 1 emcolor : # e 4531 font-weight : bold；font-size :1 em宽度：5 em文本对齐：居中}。clr { clear : both }/style脚本src=' http :3358代码。jquery。com/jquery-1。10 .2 .js '/script script src=' http :http://代码。jquery。com/ui/1。10 .4/jquery-ui。js/script/head dy div class=' slider-box ' div class=' item ' div class=' tag '骑行里程：/div class=' slider ' div id=' budget '/div/div class=' val '输入值=' 8800 '名称=' budget '/div/div class=' clr '/div class=' item ' div class=' tag '骑行天数：/div class=' slider ' div id=' days '/div/div class=' val '输入value=' 9 ' name=' days '/div/div class=' clr '/div/div脚本$(' # budget ').滑块({ min: 2000，max: 17000，step: 100，value : $(' input[name=' budget ']'). val()，slide:函数（事件，ui ) { $('input[name='budget']').val(用户界面。value)} })；$(' #天').滑块({ min: 1，max: 20，value : $(' input[name=' days ']').val()，slide:函数（事件，ui ) { $('input[name='days']').val(用户界面。value)} })；/脚本/正文/html以上就是jQuery实现移动端滑块拖动选择数字效果的代码，希望对大家的学习有所帮助。