Problem get with jquery slider ui!!

Problem get with jquery slider ui!!

Hi, i have a slider to get the value and make dynamic shapes in my html with protovis! When the slider is change value i want to have the correspondence with the curve line! My code is:
<html>
   <head>
      <title>Examlple 1 protovis</title>
      <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
      <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
      <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
      <script type="text/javascript" src="protovis-d3.1.js"></script>
      <style type="text/css">
         #slider {
            margin: 10px;
            left:0%;
            right:50%;
            position:absolute;
         }
         
         #demo {
            padding: 10px;
            left:60%;
            top:50%;
            position:absolute;
         }
      </style>
   </head>
   <body>
      <script type="text/javascript+protovis">
      var valueslider=3;   
            
      
      $(function(){
         $("#slider").slider(
           {
               max:  4,
               min:  1,
               step: 1,
               value:3,
               slide: function(event, ui) {
                  valueslider = $("#slider").slider("value");
                  
               }
            }
         );
         
      });      
      
      var vis=new pv.Panel()//root panel
         .width(640)
         .height(480)
         .strokeStyle("#000");
         
      vis.add(pv.Dot)//the circle
         .left(320)
         .top(240)
         .data([{r:40}])
         .fillStyle("#900")
         .strokeStyle(null)
         .size(function(d)d.r * d.r);
            
      if(valueslider==1){
         vis.add(pv.Wedge)
            .right(320-40)
            .bottom(240-100)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(-Math.PI/2)
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
      }
      
      if(valueslider==2){
         vis.add(pv.Wedge)
            .right(320+100)
            .bottom(240-40)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(0)
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
            
            vis.add(pv.Wedge)
            .right(320-100)
            .bottom(240+40)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(Math.PI)
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
      }
      
      if(valueslider==3){
      
         vis.add(pv.Wedge)
            .right(320+60)
            .bottom(240+80)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(-Math.PI/2)
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
            
            vis.add(pv.Wedge)
            .right(320-110)
            .bottom(240+20)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(-Math.PI/2+(2*Math.PI/3))
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
            
            vis.add(pv.Wedge)
            .right(320+40)
            .bottom(240-100)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(-Math.PI/2+(2*(2*Math.PI/3)))
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
               
      }            
            
      if(valueslider==4){   
         vis.add(pv.Wedge)
            .right(320-40)
            .bottom(240-100)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(-Math.PI/2)
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
         
         vis.add(pv.Wedge)
            .right(320+100)
            .bottom(240-40)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(0)
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
      
         vis.add(pv.Wedge)
            .right(320+40)
            .bottom(240+100)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(Math.PI/2)
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
         
         vis.add(pv.Wedge)
            .right(320-100)
            .bottom(240+40)
            .innerRadius(95)
            .outerRadius(100)
            .startAngle(Math.PI)
            .angle(2*Math.PI/3)
            .fillStyle("#000")
            .lineWidth(0.5);
      }
      
      vis.render();
      </script>
      <div id="slider"></div>
   </body>
</html>

And they didn't work!
Help me please!

Thanks for attention!