ThinkChat2.0新版上线,更智能更精彩,支持会话、画图、阅读、搜索等,送10W Token,即刻开启你的AI之旅 广告
# 滑动条 Slider 给input的设置一个新的HTML5属性为type="range",可以给页面添加滑动条组件,可以指定它的value值(当前值),min和max属性的值配置滑动条。Jquery Mobile会解析这些属性来配置滑动条。当你滑动滑动条时,input会随之更新数值,反之亦然,使你能够很简单的在表单里提交数值。注意要把label的for属性设为input的id值,使他们能够在语义上相关联,并且要用div容器包裹它们,并给他设定data-role="fieldcontain"属性 **HTML 代码:** ``` <div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div> ``` **滑动条 Slider** ![](images/form%20element/slider.png) 设置min和max属性的值你可以配置滑动条上下能取到的值,而value值是用来指定滑动条初始的位置和input框内的值 滑动杆同样对键盘有响应。右箭头,上箭头,Page Up 键可以用来增加当前值,左箭头,下箭头 ,Page Down键则减少当前值。Home 键和 End 键则可以分别调到滑动条的最小值和最大值 ## 刷新滑动条 Refreshing a slider 如果你想通过js手动控制滑动条,务必调用 refresh 方法刷新滑动条的样式 ``` $("input[type=range]").val(60).slider("refresh"); ```