CODEWITHSUNDEEP
javascriptjqueryslider
Alex
Alex

Reputation: 3958

simple slider set the value

I have the following 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>

And I have the following change event:

$('#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));
});

Which works fine.

I am now trying to create a ready event, which will get the slider to slide to my chosen value on page load.

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

Which, according to these instructions:

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

Should set the value of the slider, but it does not.

I know the ready event is firing at the right time, as I have got it to display an alert when it fires. However, the command does not seem to work.

I did not make the slider, but am pretty sure the instructions I am using are for this slider.

So my question is, how can I get the slider to slide to my chosen value?

One possibility I have considered is that I am not identifying the slider correctly, so the value is not being set? But then the ready event would not fire? If this is my mistake, how do Identify the slider eg does this:

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

contain the wrong information to identify the slider?

I have tried this:

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

but it also did not work

Upvotes: 0

Views: 519

Answers (1)

Dipali Vasani
Dipali Vasani

Reputation: 2536

check following example :

FIDDLE

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

Upvotes: 1

Related Questions