How to center text over jQuery mobile widget

Question

I need to have two pieces of text over the slider in mobile application I am working on.

Here is a mockup what I need:

I need the 'Not at all' flush with beginning of the slider track and the 'Very much' flush with the end of it. A user can rotate the phone so that the application goes to landscape mode and I need the labels to stay flush with the slider track regardless of the device's orientation.

What are the CSS rules to achieve this?

Update

Here is the code for my slider widgets:

    '<h3>Think about how you feel right now:</h3>\
    <h2>Right now, I feel:</h2>\
    <div class="jqmslidercontsurvey1a">\
        <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-happy" class="sliderlabel">Happy:</label>\
            <input type="range" name="slider-happy" id="slider-happy" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
        \
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-relax" class="sliderlabel">Relaxed:</label>\
            <input type="range" name="slider-relax" id="slider-relax" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
        \
         <div data-role="fieldcontain" class="jquerymobileslidercont">\
            <label for="slider-cheer" class="sliderlabel">Cheerful:</label>\
            <input type="range" name="slider-cheer" id="slider-cheer" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true">\
        </div>\
    </div>';

I am not sure what type of text element I should use, so I don't have any code that pertains to the text above the sliders... I was thinking a header with ids though

Answer 1

If you don't use a fieldcontain role around each label/slider pair, you can just add a <div> with 2 <span> tags between the <label> and <input> , then use some CSS to line them up.

<div  class="jquerymobileslidercont">
    <label for="slider-happy" class="sliderlabel">Happy:</label>
    <div><span class="leftSpan">Not at all</span><span  class="rightSpan">Very much</span></div>
    <input type="range" name="slider-happy" id="slider-happy" value="" min="1" max="10" step="1" class="jquerymobileslider" data-highlight="true" data-show-value="true" data-popup-enabled="true" />
</div>

.jquerymobileslidercont .leftSpan{
    margin-left: 68px;
}
.jquerymobileslidercont .rightSpan{
    position: absolute;
    right: 0px;
    margin-right: 30px;
}

The second <span> is positioned to the right via absolute positioning. If you want different font, font-size, color, etc. for these labels, just add to these CSS rules.

Here is a DEMO