title: Bootstrap jquery ui slider
body: <p>Have been trying to adjust the jquery slider width to the right size and limit its drag outside of its area.
  I have understood that the font-size makes the slider scale correctly ; but setting font-size causes the width to the look wierd.
  How can i reduce the slider boxes to small squares and not slide out ?</p>
  
  <p>jsfiddle / edit here  <a href="http://jsfiddle.net/EkkKG/" rel="nofollow noreferrer">http://jsfiddle.net/EkkKG/</a></p>
  
  <pre><code>    &lt;div class="navbar navbar-fixed-top"&gt;
       &lt;div class="navbar-inner"&gt;
         &lt;div class="container"&gt;
          &lt;a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;span class="icon-bar"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;a href="#" class="brand"&gt;Project name&lt;/a&gt;
      &lt;div class="nav-collapse"&gt;
        &lt;ul class="nav"&gt;
           &lt;li class="dropdown"&gt;
            &lt;a data-toggle="dropdown" class="dropdown-toggle" href="#"&gt;Dropdown &lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
            &lt;ul class="dropdown-menu"&gt;
              &lt;li&gt;&lt;a href="#"&gt;
                  &lt;p&gt;
                                  &lt;label for="amount"&gt;Price range:&lt;/label&gt;
                                  &lt;input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" /&gt;
                              &lt;/p&gt;
  
                  &lt;!--div style="font-size:10px;"--&gt;
                     &lt;div id="slider-range"&gt;&lt;/div&gt;
                &lt;!--/div--&gt;
                  &lt;/a&gt;&lt;/li&gt;
  
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;&lt;!-- /.nav-collapse --&gt;
    &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /navbar-inner --&gt;
    &lt;/div&gt;​
  </code></pre>
  
  <p>jquery</p>
  
  <pre><code>    $( "#slider-range" ).slider({
              range: true,
              min: 0,
              max: 500,
              values: [ 75, 300 ],
              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>​</p>
  
  <p><img src="https://i.stack.imgur.com/3loOV.png" alt="enter image description here"></p>
  
  <p>This fiddle in 'incognito' mode in chrome gave me my desired result 
  but on my actual side it still doesnt </p>