你最好使用滑块插件了。建议你看下这篇文章，能很好地解决你的问题-可以滑动滑块时实时显示数字。网页链接 是基于bootstrap里的一个slider插件，很好用。这篇有详细介绍，并且最下方有demo演示以及详细的API地址。
<input id="ex1" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="20" data-slider-step="1" data-slider-value="14"/> $('#ex1').slider({formatter: function(value) {
return 'Current value: ' + value
}
})
// Without JQuery
var slider = new Slider('#ex1', {
formatter: function(value) {
return 'Current value: ' + value
}
})
HTML5的出现带给我们了很多新的标签和元素。其中一个就是区间选择输入元素，例如，选择10以内的一个数字。这个元素其实在很多系统操作系统中都存在了很长时间，但是现在只是如何将他们整合到浏览器中。
因为使用JS可以很方便的模拟出这个效果所以HTML中一直没有可以直接使用的滑动选择元素。jQuery UI类库包含了一个非常不错的版本可以很容易进行样式设置。但是整合到浏览器中将非常简单，支持对于支持它的浏览器来说。
浏览器支持
除了著名的Firefox外所有的现代浏览器都支持这个元素，但是很容易使用html5slider.js来创建。当然IE也不支持区域选择输入，这个修改不太容易。这样的话，意味着你需要使用分开的类库类似jQuery UI来支持多浏览器。好消息在于如果浏览器不支持区域选择的话，它会做为一个输入框显示。
如何工作的？
区域选择输入元素使用输入框类似的标签<input type="range" />，支持一般的数值属性，及其min和max，用来限制区域，step用来设置滑动中数值增量。缺省为1。
你可以使用JS/jQuery来修改这些属性，也可以使用onchange事件来监听变化。代码如下：
<input id="defaultSlider" type="range" min="0" max="500" />
<p class="note">Current value: <span id="currentValue">0</span></p>
或者
$(function(){
var currentValue = $('#currentValue')
$('#defaultSlider').change(function(){
currentValue.html(this.value)
})
// Trigger the event on load, so
// the value field is populated:
$('#defaultSlider').change()
})
当然这些代码需要浏览器支持。否则你只能看到一个输入框。
当然2/3的浏览器都看不到我们这个区域选择输入，我们需要想想别的方法。我们先快速使用jQueryUI来实现一个滑动选择器。
<div id="slider"></div>
<p class="note">Current value: <span id="currentValue">0</span></p>
你可以看到代码如下：
$(function(){
var currentValue = $('#currentValue')
$("#slider").slider({
max: 500,
min: 0,
slide: function(event, ui) {
currentValue.html(ui.value)
}
})
})
代码非常简单。使用slider方法来实现。
最有意思的部分
因为我们已经实现了自己的区域选择方法，大家可以参考演示。
slider-knob.html
<div id="container">
<div id="control"></div>
</div>
<!-- The range input is hidden and updated on each rotation of the knob -->
<input type="range" id="slider" min="0" max="500" value="25" />
<p class="note">Current value: <span id="currentValue">0</span></p>
assets/js/slider-knob.js
$(function(){
var slider = $('#slider'),
min = slider.attr('min'),
max = slider.attr('max'),
currentValue = $('#currentValue')
// Hiding the slider:
slider.hide()
$('#control').knobKnob({
snap : 10,
value: 250,
turn : function(ratio){
// Changing the value of the hidden slider
slider.val(Math.round(ratio*(max-min) + min))
// Updating the current value text
currentValue.html(slider.val())
}
})
})
以上代码使用min和max来计算数值。
总结
滑动选择对于用户使用来说比输入框非常方便 。虽然浏览器支持有限，但是你可以使用jQuery来增强相关功能。
slider的意思为：滑块。
概述：
slider控件是有滑块与滑动条组成。使用Slider控件，可以计算出滑块在滑动工程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑动的范围就是0至100。按照展示方式，滑动条可以分为两种:一种是为水平滑动条（HorizontalSlider）另一种是垂直滑动（Verticallider），它们之间的用法完全相同。
开发中我们常使用滑动条来调节声音或者颜色等。slider控件是有滑块与滑动条组成。使用Slider控件，可以计算出滑块在滑动工程中占整个滑动条的比例。如果滑动条的整体长度为100，则滑动的范围就是0-100。
双语例句：
1、Slider switches on the mixers can dampen the drums.
混频器上的滑动开关可以降低鼓声。
2、Zippers can be divided into three major parts:the tape,elements and slider.
拉链可分为三个主要部分: 布带，牙齿和拉头。
3、Now let's focus on creating balance slider since this is a bit different.
现在，让我们的重点放在建立平衡滑块，因为这是一个有点不同。
4、The switch can be a thermally activated mechanical relay built onto the slider.
该开关可以是构建在滑块上的热启 动机械继电器。
5、Use this slider to choose the speed of the double - click action.
使用这个滑块来选择双击动作的速度。
