本文实例讲述了jquery实现鼠标拖拽滑动效果来选择数字的方法。分享给大家供大家参考。具体如下：
这是使用jquery ui实现的一个精美实用的效果，可以通过鼠标拖拽滑动效果来选择数字
<Meta charset="utf-8">
demo
.slider-Box{ background:#F0EFEB;
font-family:Microsoft Yahei; padding-bottom:10px
}
.slider-Box .item{ padding:10px}
.slider-Box .item .tag,.slider-Box .item .slider,.slider-Box .item .val{
float:left; margin-right:18px
}
.slider-Box .item .slider{ width:400px}
.slider-Box .item .slider div{
background:#8FBF0B; border:none;
height:0.5em; margin-top:0.5em
}
.slider-Box .item .slider div .ui-slider-handle{
background:#F4F3F1; width:1em;
height:1em; border-radius:1em
}
.slider-Box .item .val input{
border:none; border-bottom:1px solid #ABADA8;
background:none; padding:0.1em 1em;
color:#E4531C; font-weight:bold;
font-size:1em; width:5em; text-align:center
}
.clr{ clear:both}
@H_403_28@
$("#budget").slider({
min: 2000,max: 17000,step: 100,value: $('input[name="budget"]').val(),slide: function( event,ui ) {
$('input[name="budget"]').val(ui.value)
}
});
$("#days").slider({
min: 1,max: 20,value: $('input[name="days"]').val(),ui ) {
$('input[name="days"]').val(ui.value)
}
});