jQuery Mobile Slider for dollar amounts

Question

I am wondering if anyone knows how to modify the jQuery Mobile Slider to show dollar amounts? Or at the very least so show 2 decimal points at all times. i.e. if a user selects 10 I want it to show 10.00 instead of 10. With my current HTML below, if a user selects 10 it is just rounded to 10 without any decimal points.

I have tried the following code with and without the dollar sign prefix and every time I change the slider position it just resets the slider to the min value of 8.15.

I am starting to think that what I am looking for cannot be done, but I'm curious if anyone knows how to do this....

jQuery

    $(function() {
        $('#mySlider').on( 'slidestop', function( event ) {
            var amt = parseFloat($('#mySlider').value);
            $('#mySlider').val('$' + amt.toFixed(2));
            $('#mySlider').slider('refresh');
        });
    });

HTML

<input type='range' name='mySlider' id='mySlider' min='8.15' max='16.00' value='<?php echo $startWage; ?>' data-popup-enabled='true' step='0.05'>

Answer 1

One way to do this is to hide the input and use your own textbox in its place.

I have placed the slider markup within a named container and added an input to the container that will display the dollar amount:

<div id="theDollars" class="dollar-slider">
    <label for="mySlider">Dollars:</label>
    <input type="range" name="mySlider" id="mySlider" data-highlight="true" min="8.15" max="16" value="10" data-popup-enabled='true' step='0.05' />
    <input type="text" data-role="none" class="dollarLabel ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input" value="$10.00" disabled />
</div>

In CSS, I hide the existing input and then place the new input where the old one was:

.dollar-slider input[type=number] {
    display: none; 
}
.dollar-slider .dollarLabel{
    position: relative;
    top: -38px;
    width: 50px;
}

Then in code, handle the slider's change event, convert the value to the desired dollar string ($10.00):

$("#mySlider").on("change", function(){
    var dollars = '$' + parseFloat($(this).val()).toFixed(2);
    $("#theDollars .dollarLabel").val(dollars);
    $("#theDollars .ui-slider-popup").html(dollars);
    $("#theDollars .ui-slider-handle").prop("title", dollars);
});

DEMO