Вывод в зависимости от 2 слайдеров

Question

Я хочу сделать «калькулятор» только с 2 переменными в качестве входного ползунка:

Ползунок X и Ползунок Y.

Поэтому при перемещении X (3 значения) вы получаете в Y (3 значения каждое значение X, всего 9 значений).

В Codepen я смотрю много калькуляторов, но проблема в том, что «шаг» всегда линейный.

Мне нужно 3 значения например, 80 70 и 200.

это так близко:

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

Но я хочу что-то вроде, вы выбираете значение в X и значение в Y, так что у вас есть 1 выход.

Всего у вас есть 9 различных выходов X (3) и Y (9, 3 каждый X)

Возможно сделать что-то вроде этого, а с 2 слайдером?:

$( 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 для замены при изменении.

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

А если вы хотите использовать jQuery Виджет слайдера $('#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();
});

CodePen: https://codepen.io/kuiexbpq/pen/BaNqmMe?editors=1111