position text on both sides of zurb 6 range slider - zurb-foundation-6

Question

I am trying to have text on both edges (right and left) of the slider. It's very clear why this makes sense from a UX perspective. Obviously that's not working for me:
<div class="row">
<div class="small-10 small-centered columns">
<fieldset class="fieldset ">
<legend style="background:0;">bla bla</legend>
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
<div class="row">
<div class="small-1 small-centered columns">
<input type="number" id="sliderOutput2" style="text-align:center; color: #1583cc;">
</div>
</div>
</fieldset>
</div>
</div>
The texts become their own row while the slider takes up the entire width of the container as a third row in between them.
I'd like them to be one row, where the slider occupies the space left after the texts have been positioned at the (left and right) edges of the container's width. How should that be accomplished in a nice way?

Answer 1

As a newb to the Zurb Foundation, you should look into the grid system which allows you to do just what you are asking. It is also the basis for the responsive design.
Your code:
<div style="color:#1583cc">left extreme name</div>
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
<div style="color:#1583cc">right extreme name</div>
... should utilize the grid. Here is an example but there are many ways you could go about it.
<div class="row">
<div class="small-3 columns" style="color:#1583cc">left extreme name</div>
<div class="small-6 columns">
<div class="slider" data-slider data-initial-start="50" data-initial-end="100">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="sliderOutput2"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-3 columns" style="color:#1583cc">right extreme name</div>
</div>
http://foundation.zurb.com/sites/docs/slider.html#data-binding
Here is the info on grids (and more basics) you should study:
http://foundation.zurb.com/sites/docs/grid.html#basics