<!DOCTYPE html>
<html>
<head>
<title>slider</title>
<meta charset="utf-8">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p id="mem_num"></p> <div id="slider"></div> <button class="btn btn-success" id="test01">禁用</button>
<button class="btn btn-success" id="test02">激活</button>
<button class="btn btn-success" id="test03">获取参数</button>
<button class="btn btn-success" id="test04">切换</button>
<script type="text/javascript">
$( "#slider" ).slider({
// 动画效果快速
animate: "fast",
// 关闭滑动条
// disabled: true,
//最小值为2，最大值为32，每一次拖动变化为2，默认值为4
min: 2,
max: 32,
step: 2,
value: 4,
// 获取滑动条的值并且打印
slide: function( event, ui ) {
$('#mem_num').html(ui.value)
console.log(ui.value);
}
});
//禁用滑动条
$('#test01').on('click', function(){
$( "#slider" ).slider( "option", "disabled", true );
}) //激活滑动条
$('#test02').on('click', function(){
$( "#slider" ).slider("enable");
}) //获取滑动条的值，在console窗口打印
$('#test03').on('click', function(){
console.log($( "#slider" ).slider( "value" ));
}) //在禁用和激活之间切换
$('#test04').on('click', function(){
var is_disabled = $( "#slider" ).slider( "option", "disabled" ); if(is_disabled) {
$("#slider").slider("enable");
$('#test04').html('禁用');
}else{
$( "#slider" ).slider( "option", "disabled", true );
$('#test04').html('激活');
}
}) </script>
</body>
</html>
示例，滚动条展示数值：
参考：
http://jqueryui.com/slider/#custom-handle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryui</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <style>
#custom-handle {
width: 3em;
height: 1.6em;
top: 50%;
margin-top: -.8em;
text-align: center;
line-height: 1.6em;
}
</style>
</head>
<body> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</body> <!-- <div id="slider" class="selector"></div> --> <div id="slider">
<div id="custom-handle" class="ui-slider-handle"></div>
</div> <script>
$( function() {
var handle = $( "#custom-handle" );
$( "#slider" ).slider({
// range: true,
min: 2,
max: 64,
step: 2,
create: function() {
handle.text( $( this ).slider( "value" ) );
},
slide: function( event, ui ) {
handle.text( ui.value );
}
});
} );
</script>
</html>