简单的滑块设置值

Question

我有以下 simple-slider.min.js:

<div class="field text" id="AmountSliderContainer">                        
            <label class="sliderAmountLabel" id="sliderAmountLabel" for="SliderLoanAMount">How much would you like to borrow?</label>                                   
            <div id="SliderLoanAMount">                
                <ul>
                    <li id="amountSlider">
                        <input name="lendingAmount" id="lending" class="slider amount" type="text" data-slider="true" data-slider-highlight="true" data-slider-range="1000,10000" data-slider-step="250" />                                                                                                
                        <div class="LoanAmountContainer">
                            <span class="PoundSign">&#163;</span><span><input readonly="true" id="<% = LoanApplication.CONST_FIELD_NAME_LOANAMOUNT %>" name="<% = LoanApplication.CONST_FIELD_NAME_LOANAMOUNT %>" value="<% = oLoanApplication.GetField(LoanApplication.CONST_FIELD_NAME_LOANAMOUNT).GetValueOrDefault(loanAmount) %>" class="output amount plain" /></span>
                        </div>
                    </li>
                </ul>                   
            </div>                                                
        </div>

我有以下更改事件：

$('#AmountSliderContainer.field.text .slider.amount').bind('slider:changed', function (event, data) {
    $('#AmountSliderContainer.field.text .output.amount, #AmountSliderContainer .foot p .amount').text(data.value.toFixed(2));
    $('#AmountSliderContainer.field.text input.output.amount').val(data.value.toFixed(2));
});

效果很好。

我现在正在尝试创建一个 ready 事件，这将使滑块在页面加载时滑动到我选择的值。

$('#AmountSliderContainer.field.text .slider.amount').bind('slider:ready', function (event, data) {
    $('#AmountSliderContainer.field.text .slider.amount').simpleSlider("setValue", 5000);
});

其中，根据这些说明：

http://loopj.com/jquery-simple-slider/

应该设置滑块的值，但它没有。

我知道 ready 事件在正确的时间触发，因为我已经让它在触发时显示警报。但是，该命令似乎不起作用。

我没有制作滑块，但我很确定我使用的说明是针对此滑块的。

所以我的问题是，如何让滑块滑动到我选择的值？

我考虑过的一种可能是我没有正确识别滑块，所以没有设置值？但是 ready 事件不会触发？如果这是我的错误，如何识别滑块，例如：

$('#AmountSliderContainer.field.text .slider.amount').

包含错误的信息来识别滑块？

我试过这个：

$('#AmountSliderContainer.field.text .slider.amount').bind('slider:ready', function (event, data) {        
    $('#amountSlider').simpleSlider("setValue", 5000);
});

但也没有用

Answer 1

检查以下示例：

FIDDLE

$('#lending').simpleSlider("setValue", $("#loanAmt").val());
$("[data-slider]").bind("slider:ready slider:changed", function (event, data) {
      $("#loanAmt").val(data.value);
});

简单的滑块设置值

simple slider set the value

javascript

jquery

slider