如何使多个标签显示在JQuery范围滑块中

How To Make Multiple Labels Appear In JQuery Range Slider?

本文关键字：范围 JQuery 何使多 标签 显示      更新时间：2023-09-26

我正试图弄清楚如何让滑块说出两件不同的事情。我希望滑块上方的输入是1.25美元的20步的美元金额（在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 ));    
});

我想这就是你想要的。。。检查小提琴：

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>");
        }
    });
});
相关文章：