简单滑块设置值

时间:2016-03-16 12:51:49

标签: javascript jquery slider

我有以下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事件是在正确的时间触发,因为我已经让它在触发时显示警报。但是,该命令似乎不起作用。

我没有制作滑块,但我很确定我使用的说明适用于此滑块。

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

我考虑过的一种可能性是我没有正确识别滑块,所以没有设置值?但那时准备好的事件不会开火?如果这是我的错误,如何识别滑块,例如:

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

包含识别滑块的错误信息?

我试过这个:

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

但它也无效

1 个答案:

答案 0 :(得分:1)

检查以下示例:

FIDDLE

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