如何在JQuery范围滑块中出现多个标签?

时间:2015-02-04 19:04:50

标签: javascript jquery html css jquery-ui

我正试图弄清楚如何让滑块说出两个不同的东西。我希望滑块上方的输入用$ 1.25的二十步来说美元金额(介于20和45之间) - 但我希望实际的句柄只说单个整数答案,如1..2..3..4 ..一直到20,所以第一个位置会在手柄中读取(1)并且在它上方($ 20),滑块的第二步将在滑块圆中读取(2)并在其上方($ 21.25)读取。

到目前为止,我的代码如下:

$(function() {

    $( "#slider" ).slider({
        value: 0,
        min: 20,
        max: 45,
        step: (1.25),
        slide: function( event, ui ) {
            var id = $(this).attr("id");
            $("span[class*=" + id + "]").text(ui.value);
            $("input[class*=" + id + "]").val(ui.value);
            $( "#amount" ).val( "$" + ui.value );
        }
    });

    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ).toFixed( 2 ));    
});

1 个答案:

答案 0 :(得分:0)

我认为这就是你要找的......检查小提琴:

http://jsfiddle.net/rx4cm4q7/4/

$(function () {

    $("#slider").slider({

        value: 0,
        min: 20,
        max: 45,
        step: (1.25),

        slide: function (event, ui) {
            console.log(ui);
            var id = $(this).attr("id");
            var x = (ui.value - 20)/1.25;
            console.log(x);
            $("#amount").html("$" + ui.value);
            $("#step").html("<B>" +x+"</b>");
        }
    });

});