title: How to prevent slider from stretching?
body: <p>Just getting acquainted with jQuery UI. So, this is a block of code from my view:</p>
  
  <pre><code>&lt;label id="min"&gt;
      5000&lt;/label&gt;
  &lt;div id="slider"&gt;
  &lt;/div&gt;
  &lt;label id="max"&gt;
      9000&lt;/label&gt;
  </code></pre>
  
  <p>And a part of the script:</p>
  
  <pre><code>    $('#slider').slider({
          animate: true,
          range: true,
          min: 5000,
          max: 9000,
          values: [5000, 9000],
          slide: function (event, ui) {
              //doing smth
          }
      });    
  </code></pre>
  
  <p>Everything works fine, but the slider is stretched and takes the whole line. The labels are below and under it.
  I expected them all to be in one line.</p>
  
  <p>What should I do to achieve it?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is what I am expecting:</p>
  
  <p><img src="https://i.stack.imgur.com/ZmQy1.png" alt="Correct"></p>
  
  <p>And this is what I have:</p>
  
  <p><img src="https://i.stack.imgur.com/abGte.png" alt="Error"></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I tried to override the slider css by adding the following code to my <em>Site.css</em> file:</p>
  
  <pre><code>.ui-slider .ui-slider-handle
  {
      position: absolute;
      z-index: 2;
      width: 0.5em !important;
      height: 1.2em !important;
      cursor: default;
  }
  </code></pre>
  
  <p>but nothing changed. How can I make jQuery use this css?</p>
  
  <p><strong>Another note</strong>: the original css looks like this:</p>
  
  <pre><code>.ui-slider .ui-slider-handle
  {
      position: absolute;
      z-index: 2;
      width: 1.2em;
      height: 1.2em;
      cursor: default;
  }
  </code></pre>
  
  <p>So, is css the issue here? Or something else makes my slider stretch??</p>
  
  <p><strong>MORE</strong></p>
  
  <p>This is the generated html:</p>
  
  <pre><code>&lt;div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all"&gt;
      &lt;div class="ui-slider-range ui-widget-header" style="left: 25.95%; width: 74.05%;"&gt;
      &lt;/div&gt;
      &lt;a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 25.95%;"&gt;
      &lt;/a&gt;
      &lt;a href="#" class="ui-slider-handle ui-state-default ui-corner-all" style="left: 100%;"&gt;
      &lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>At last</strong></p>
  
  <p>I had to override <code>.ui-slider</code> class, not <code>.ui-slider .ui-slider-handle</code>. That was the issue.</p>
  
  <p>Rajesh Rolen- DotNet De, thank you!</p>