Slider in UI - how to change dynamically width of ".ui-slider-handle" ?

Slider in UI - how to change dynamically width of ".ui-slider-handle" ?

I am using jQuery UI slider plugin and trying to set dynamically width of slider handle in javascript code.
  1. <!DOCTYPE html>
    <html>
    <head>
      <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <style type="text/css">
        #slider { margin: 10px; }
      </style>
      <script>
          $(document).ready(function() {

              var handleWidth = 200;
              var scrollbar = $("#slider").slider();

              scrollbar.find('.ui-slider-handle').css({
                  width: handleWidth
              });

          });
      </script>
    </head>
    <body>
     
    <div  style="width: 500px">
        <div id="slider"></div>
    </div>

    </body>
    </html>































But it works incorrectly. Slider handle goes outside of scrollbar in right side. Also when I clicking on this handle it changing position out of mouse cursor. Is there a way to force this handle to work correctly depending on width of  the handle?