title: I've tried numerous ways to fit my handle in my slider and I can't get it working
body: <p>I'm back again for another question about my range slider. I have my range sliders the width I need , and the height. The problem I am having is with the handle size and position. I set up my handles to be higher than the the slider itself, and I have the handles at the correct positions, but I can't figure out how to make the handles fit in the slider itself without any over hang. I have searched around but found nothing workable</p>
  
  <p>My CSS file is</p>
  
  <pre><code>div.ui-slider-range.ui-widget-header {
  background:#C6DC84;  
  height:42px; 
  }
  div.ui-widget-content {
  background: #D3D3D3;
  height:42px;
  }
  
  div.ui-slider-horizontal .ui-slider-handle {
  background:#A18ABF;
  text-decoration:none;
  width:5px;
  height:42px;
  margin-left:-2px;
  border:none;
  
  }
  </code></pre>
  
  <p>and my Jquery is</p>
  
  <pre><code>$(function () {
  
            $("#slider-range-Monday").slider({
  
                range: true,
  
                min: 0,
  
                max: 24,
  
                values: [0, 24],
  
                animate: 'slow',
  
                slide: function (event, ui) {
  
                    $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
  
                }
  
            });
  
            $("#amount").val("$" + $("#slider-range").slider("values", 0) +
  
              " - $" + $("#slider-range").slider("values", 1));
  
  });
  </code></pre>
  
  <p>I'm almost positive that I am missing something in the css. </p>
  
  <p>Thanks</p>