JQuery simple-slider

Question

I have a jQuery simple-slider setup. The slider is working fine so far. Below is the code used to create the slider:

<li id="amountSlider">
    <input id="lending" class="slider amount" type="text" data-slider="true" data-slider-highlight="true" data-slider-range="1000,10000" data-slider-step="250" />
    <p>
        <strong>
            £
            <span class="output amount">1000.00</span>
        </strong>
    </p>
</li>

and

<script src="/javascript/simple-slider.min.js" type="text/javascript" charset="utf-8"></script>

I am now trying to set a default value for the slider, but it is not working. I have:

$("#lending").bind("slider:ready", function (event, data) {
    var selector = $('#lending');
    selector.simpleSlider("setValue", 2500);
});

I know this is firing, as if I use an alert box it displays. The error I get is:

Uncaught TypeError: Cannot read property 'setValue' of undefined

I have no idea why this would not work. As far as I can see I have implemented all the instructions properly. I have also checked the simple-slider-min.js file, and the method is there as follows:

simpleSlider: function(){
    var t, r, i;
    return i = arguments[0],
        t = 2 <= arguments.length ? __slice.call(arguments, 1) : [],
        r = [ "setRatio", "setValue" ],
        e(this).each

So my thoughts are that selector is undefined, so I have tried:

$("#lending").bind("slider:ready", function (event, data) {
    var selector = document.getElementById('lending');
    selector.simpleSlider("setValue", 2500);
});

Which gives the following error:

Uncaught TypeError: selector.simpleSlider is not a function

But it is a function and I have found it in the JS code! I am out of ideas, any suggestions/experience with this?

Answer 1

Just giving it in the $(document).ready(); function does the trick!

$(document).ready(function () {
    var selector = $('#lending');
    selector.simpleSlider("setValue", 2500);
});

@import url("http://loopj.com/jquery-simple-slider/css/simple-slider.css");
@import url("http://loopj.com/jquery-simple-slider/css/simple-slider-volume.css");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://loopj.com/jquery-simple-slider/js/simple-slider.js"></script>
<li id="amountSlider">
  <input id="lending" class="slider amount" type="text" data-slider="true" data-slider-highlight="true" data-slider-range="1000,10000" data-slider-step="250" />
  <p><strong>£<span class="output amount">1000.00</span></strong></p>
</li>