what is the correct way to resize the slide handler? - any one show me in fiddle?

what is the correct way to resize the slide handler? - any one show me in fiddle?

I made  a scroller bar, and resized the handler, it very bad... how can i resize the handler with correct way any one have a look here and help me?

my codes:

  1. $(function() {
  2.     $('#sample').slider({orientation:'vertical'});
  3. });​
css:

  1. .ui-slider {
  2.     position: relative;
  3.     height: 300px;
  4.     width: 20px;
  5.     line-height: 20px;
  6.     border-radius: 2em;
  7.     background: #CCC;
  8.     margin-left:50px;
  9. }
  10. .ui-slider-handle.ui-state-default {
  11.     display: block;
  12.     cursor: move;
  13.     height:100px;
  14.     margin-left:4px;
  15.     margin-top:0.2em;
  16.     background: #333
  17. }​