Javascript jQuery UI slider-步骤数为12，根据最大/最小变量使用不同的数值跳跃

我希望步数总共为12步，但等距间隔取决于最小和最大变量。在实现这一目标的过程中，任何帮助或正确方向上的一点都将不胜感激

下面是我的Javascript/jQuery代码：

// Have the user input their medical bill amount
var originalAmount = prompt('What is the amount of your medical bill?');
console.log(originalAmount);

// Take off 20% of the medical bill for a discount
var discountAmount = originalAmount * .20;
console.log('Your discount is 20%, which is ' + discountAmount + ' in savings.');

// Declare what the new amount owed is after taking the discount off
var newAmount = originalAmount - discountAmount;
console.log('Your new amount owed for your bill is ' + newAmount + ' .');

// First step-payment is calculated by dividing the amount of the bill into twelve months
var firstStep =  Math.round(newAmount / 12 *100)/100;

// Last step-payment is calculated by dividing the amount of the bill into two months
var lastStep = Math.round(newAmount / 2 *100)/100;

// Calculate middle steps to be divisible by 12 months
var middleSteps = Math.round(newAmount / 12 *100)/100;

// jQuery function for the slider
$(function() {
  $( "#slider" ).slider({
      min: firstStep,
      max: lastStep,
      step: middleSteps,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
  });
  $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
});

---

从这些评论中，我认为您正试图使

ui滑块

本身发挥更大的作用。实际上，您只需将其设置为1-12，将步骤设置为1，然后在滑块的

slide（）方法中运行月度付款计算

这里有一个例子

而代码

[注意-此示例不包含您可能需要的任何验证逻辑]

jQuery/Javascript:

// setup your variables / initialize slider
var bill = 0,
    discount = 0,
    newBill = 0,
    reqDist = 0,
    sliderIndex = 0;

var slide = $("#slider").slider({
    value: 1,
    min: 0,
    max: 12,
    step: 1,
    slide: function (event, ui) {
        sliderIndex = ui.value;
        $('#month').text(sliderIndex);
        reqDist = calcDistribution(newBill, sliderIndex);
        $('#amount').val("$" + reqDist);
    }
});


// disable until user adds a current bill
$(function () {
    slide.slider('disable');
});


$('#go').click(function () {

    // turn the slider on
    slide.slider('enable');
    // get the entered value
    bill = $('#medBill').val();

    // discount
    discount = calcDiscount(bill);
    $('#discount').text("$" + discount);

    // new bill
    newBill = bill - discount;
    $('#newBill').text("$" + newBill);


    // one month
    $('#month').text(1);
    $('#amount').val("$" + newBill);
});



// helper functions
function calcDiscount(val) {
    return val * 0.20;
}

function calcDistribution(value, period){
    return Math.round(value / period);
}

<div id="container">
    <div>
        <p>
            <label>What is your current medical bill?</label>
            <input type="input" id="medBill" value="800" />
            <button id="go">Enter</button>
        </p>
    </div>
    <div>
        <p>
            <label>Discount:</label>
            <label class="result" id="discount"></label>
        </p>
        <p>
            <label>New payment amount:</label>
            <label class="result" id="newBill"></label>
        </p>
    </div>
    <div>
        <p>
            <label for="amount">Current <em class="result" id="month">0</em> month payment amount:</label>
            <input type="text" id="amount" style="border:0; color:#f6931f; font weight:bold;" readonly />
        </p>
    </div>
    <div id="slider"></div>
</div>

#slider {
    width: 600px;
}
.result {
    color: darkgreen;
}
#container {
    padding: 20px;
}

HTML:

// setup your variables / initialize slider
var bill = 0,
    discount = 0,
    newBill = 0,
    reqDist = 0,
    sliderIndex = 0;

var slide = $("#slider").slider({
    value: 1,
    min: 0,
    max: 12,
    step: 1,
    slide: function (event, ui) {
        sliderIndex = ui.value;
        $('#month').text(sliderIndex);
        reqDist = calcDistribution(newBill, sliderIndex);
        $('#amount').val("$" + reqDist);
    }
});


// disable until user adds a current bill
$(function () {
    slide.slider('disable');
});


$('#go').click(function () {

    // turn the slider on
    slide.slider('enable');
    // get the entered value
    bill = $('#medBill').val();

    // discount
    discount = calcDiscount(bill);
    $('#discount').text("$" + discount);

    // new bill
    newBill = bill - discount;
    $('#newBill').text("$" + newBill);


    // one month
    $('#month').text(1);
    $('#amount').val("$" + newBill);
});



// helper functions
function calcDiscount(val) {
    return val * 0.20;
}

function calcDistribution(value, period){
    return Math.round(value / period);
}

<div id="container">
    <div>
        <p>
            <label>What is your current medical bill?</label>
            <input type="input" id="medBill" value="800" />
            <button id="go">Enter</button>
        </p>
    </div>
    <div>
        <p>
            <label>Discount:</label>
            <label class="result" id="discount"></label>
        </p>
        <p>
            <label>New payment amount:</label>
            <label class="result" id="newBill"></label>
        </p>
    </div>
    <div>
        <p>
            <label for="amount">Current <em class="result" id="month">0</em> month payment amount:</label>
            <input type="text" id="amount" style="border:0; color:#f6931f; font weight:bold;" readonly />
        </p>
    </div>
    <div id="slider"></div>
</div>

#slider {
    width: 600px;
}
.result {
    color: darkgreen;
}
#container {
    padding: 20px;
}

恐怕你不能这么做。jquery UI滑块不允许可变步长。因此，您必须修改该插件或使用另一个插件。顺便说一句：选项与滑块的值有关，而不是步骤。是否要显示12个月内每次付款的金额？@wahwah这是正确的。@最晚的情况下，您是否对其他插件或如何修改当前插件有任何建议？@KatieReed-我想您可能只是ui滑块上的设置有误。或者我可能误解了你的意思。