用于美元金额的 jQuery Mobile 滑块

Question

我想知道是否有人知道如何修改 jQuery Mobile 滑块以显示美元金额？或者至少始终显示 2 个小数点。即，如果用户选择 10，我希望它显示 10.00 而不是 10。在下面我当前的 HTML 中，如果用户选择 10，它只是四舍五入到 10，没有任何小数点。

我尝试了以下代码，无论是否使用美元符号前缀，每次更改滑块位置时，它都会将滑块重置为最小值 8.15。

我开始认为我正在寻找的东西无法完成，但我很好奇是否有人知道如何做到这一点......

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

一种方法是隐藏输入并在其位置使用您自己的文本框。

我已将滑块标记放置在命名容器中，并向容器中添加了一个显示美元金额的输入：

<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>

在 CSS 中，我隐藏现有输入，然后将新输入放在旧输入的位置：

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

然后在代码中，处理滑块的更改事件，将值转换为所需的美元字符串（$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