javascript - 输出取决于 2 个 slider

Question

我想制作一个仅包含 2 个变量作为输入 slider 的“计算器”:

slider X 和 slider Y。

因此，当您移动时，X(3 个值)在 Y 中(每个 X 值 3 个值，总共 9 个值)。

在codepen中我看了很多计算器，但问题是“步骤”总是线性的。

我需要 3 个值，例如 80、70 和 200。

非常接近:

https://codepen.io/neel2292/pen/jbjMLe

但我想要类似的东西，你在 X 中选择一个值，在 Y 中选择一个值，这样你就有 1 个输出。

总共有 9 个不同的输出 X (3) 和 Y(9 个，每个 X 3 个)

是否可以制作类似这样的东西，但有 2 个 slider ？:

$( function() {
            var p = {       
                0: "3 months",
                1: "6 months",
                2: "12 months",
            };

                var t = {
                0: "2.083,33 €/month",
                1: "1.041,67 €/month",
                2: "520,83 €/month",
            };

            $("#slider").slider({
               value: "1",
                min: 0,
                max: 2,
                step: 1,
                slide: function(event, ui) {

                    $("#price").val(t[ui.value]);
                    $("#amount").val(p[ui.value]);  
                }
            });
});

Answer 1

更新: 您可以使用 oninput 来替换更改。

代码笔: https://codepen.io/kuiexbpq/pen/BaNqmMe?editors=1111

如果你想使用 jQuery Slider Widget $('#slideElement').slider({})，我觉得还可以，你可以试试。

试试这个:

Javascript:

var getResult = function() {
    var tokenP = $('#price_slider').val();
    var tokenT = $('#months_slider').val();
    var pLable = ["1000 USD","1500 USD", "2000 USD"];
    var tLable = ["1 month", "1.5months", "2.5 months"];

    var resultArray=[{"p":"0","t":"0","cost":"1000"},   {"p":"0","t":"1","cost":"1640"},{"p":"0","t":"2","cost":"5000"},{"p":"1","t":"0","cost":"1800"},{"p":"1","t":"1","cost":"3000"},{"p":"1","t":"2","cost":"2000"},{"p":"2","t":"0","cost":"8000"},{"p":"2","t":"1","cost":"7000"},{"p":"2","t":"2","cost":""Give U a Special Discount 1450!"}];
    var output="";
    resultArray.forEach(result=>{
        if(result.p === tokenP && result.t === tokenT)
        {
            output = result.cost
        }
    })
    $('.installment-value').text(output);
    $('#price_value').text(pLable[Number(tokenP)]);
    $('#months_value').text(tLable[Number(tokenT)]);
}


$('#price_slider').change(function(event) {
    getResult();
});

$('#months_slider').change(function(event) {
    getResult();
});

代码笔: https://codepen.io/kuiexbpq/pen/BaNqmMe?editors=1111