title: Twitter Bootstrap - Appending numeric stepper inline next to an input field
body: <p>I'm attempting to code this:</p>
  
  <p><a href="https://dl.dropboxusercontent.com/u/233981/Numerical_slider.PNG" rel="nofollow">https://dl.dropboxusercontent.com/u/233981/Numerical_slider.PNG</a></p>
  
  <p>After some research, I found <a href="http://loopj.com/jquery-simple-slider/" rel="nofollow">http://loopj.com/jquery-simple-slider/</a> which seemed like a great start.</p>
  
  <p>So far I have:</p>
  
  <pre><code>&lt;div class="control-group"&gt;
   &lt;label class="control-label"&gt;Label 1&lt;/label&gt;
    &lt;div class="controls"&gt;    
    &lt;input type="text" data-slider="true" value="0.6" data-slider-highlight="true" data-slider-theme="volume"&gt;  
    &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>This works fine for the slider, but now I'm trying to put a numeric stepper next to the slider. Hence:</p>
  
  <pre><code>&lt;input type="number" class="input-mini" value="60"&gt;
  </code></pre>
  
  <p>I've been fiddling with <code>input-append</code> and <code>help-inline</code> trying to get the numeric stepper to sit nicely next to the slider but it just isn't flying. I keep getting some variation of the <code>&lt;input type="number"&gt;</code> field showing below the slider rather than next to.</p>
  
  <p>How can I move the number input field to the right hand side of the slider?</p>