title: Slider handle out of content
body: <p>I dynamically create my JQuery slider like this: </p>
  
  <pre><code>var slider = document.createElement("div");
          $(slider).slider({
              orientation: "vertical",
              range: "min",
          });
  </code></pre>
  
  <p>And assign him a class: <code>$(slider).slider().addClass("dhSliderDesktop");</code>
  I also override some settings for the slider handle but cannot make it to fit it's track.
  What am I doing worng? can you help please...</p>
  
  <p>CSS: </p>
  
  <pre><code>.dhSliderDesktop {
      position: absolute !important;
      right:9px !important;
      visibility:hidden;
      height: 100% !important;
  
      width:10px !important;
      color:green !important;
      background-color:red !important;
      background: blue !important;} 
  
  
  
  .ui-slider .ui-slider-handle {
  
      width:40px !important;
      height:30px !important;
  
      left: -10.5px !important;
      border-style:none !important; 
      background-color: yellow !important;}
  </code></pre>
  
  <p>As you can see in the picture below the sliders handle is getting out of the content window which I don't want. How to fix this?</p>
  
  <p><img src="https://i.stack.imgur.com/Fg94Z.png" alt="enter image description here"></p>