js中创建进度条和滑动块

引入：

<link type="text/css" href="Jquery/jquery-ui-1.7.2.custom.css" rel="stylesheet" />

<script type="text/javascript" src="Jquery/jquery-1[1].3.2.min.js"></script>

<script type="text/javascript" src="Jquery/ui.core.js"></script>
  
<script type="text/javascript" src="Jquery/ui.progressbar.js"></script>
   
<script type="text/javascript" src="Jquery/ui.slider.js"></script>

$(function(){
var init_val=0;                                                                       //初始数值，进度条和滑动块的值。
$("#slider").progressbar({value:init_val});                             //设置初始值
var progress_val=$("#slider").progressbar("option","value");
$("#slider").slider({animate:true,value:progress_val});         //设置滑动效果为动画效果，设置滑动块初始值。
$("#slider").bind('slidestop',function(event,ui){                     //绑定滑动块的停止事件。
$("#slider").progressbar("option","value",ui.value);               //设置当前进度条的值
var dqjd=$("#slider").slider("option","value");                        //获取当前进度条的值                   
PlayBKControl("",0,dqjd);                                                       //调用这个进度值
});
});

进度条和滑动块在这里被合二为一了

<div id="slider"     style=" background-color:Green; width: 450px; height: 1px;margin-left:120px ;">

效果图：