cannot call methods on slider prior to initialization attempt to call method 'value'

Question

I am using the following code for slider

Css and Jquery:

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

ASPX:

<p>
   <label for="amount">Value:</label> 
   <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />%
</p> 
<div id="slider-vertical" style="height: 15px; width:800px"></div>
<script type="text/javascript">
    $(function () {
        $("#slider-vertical").slider({
            orientation: "horizantal", range: "min", min: 0, max: 100, value: 60,
            slide: function (event, ui)
            { $("#amount").val(ui.value); }
        });
        $("#amount").val($("#slider-vertical").slider("value"));
    });
</script>

I am trying to set the value for slider:

function UpdateSlider(PhaseInStatusReportVal) {
    $("#slider-vertical").slider("value").val(PhaseInStatusReportVal);
}

I am calling above code from something like this :

ClientScript.RegisterStartupScript(Me.GetType(), "updatetheslider", "UpdateSlider('" + BCOMSPackageValidationList(0).PhaseInStatusReport.ToString() + "')", True)

but it's throwing the above error.

Can anyone please help me?

Diaphane

$("#slider-vertical").slider("values", PhaseInStatusReportVal); ? – Weaponry

I tried it's throwing Error: cannot call methods on slider prior to initialization; attempted to call method 'values' – Diaphane

did you find the root-cause ? – Afrikah

Answer 1

Have you considered a different approach. Setup a hidden field with the initial value -> populate the value from the code-behind, then do something like:

$(function () {
    $("#slider-vertical").slider({
        value: $("#hiddenFieldWhatever").val(),
        // setup the rest ...
    });  
});

I hope I understood your requirements correct.

Maitilde

I have hard-coded the value, but it still throws the same error. – Afrikah

Answer 2

var slider = $("#slider-vertical");

var a = function() {
    if(slider.slider("instance")) {
        slider.slider('value', 1);
        console.log('set value');
    } else {
        console.log('ERROR: cannot set value prior to initialization');
    }
}

var b = function() {
    slider.slider();
    console.log('initialized');
}

a();
b();
a();

Euphony

Yep, this is the only option that worked for me to check if slider has been initialized on element: $(element).slider("instance") – Beulahbeuthel

Answer 3

No answers explain the issue. The problem is that you're trying to create an event listener on a DOM element before the document is loaded:

If your chunk of code is supposed to run as soon as the page is loaded you can wrap it in a function to run as soon as the document loads:

document.onload=function(){
// Your Code Here
}

If the chunk of code runs dynamically inside a function you can simply wrap your code inside a check to make sure the document is loaded:

if (document. readyState === 'complete') {
//Your Code Here
}

Judsen

Answer 4

In order to set the value of the slider you need to use the value method

$("#slider-vertical").slider("value", PhaseInStatusReportVal);

Demo: Fiddle

Tilford

Answer 5

I found that if you use the event from the ON function from the slider library you can get that value. Ex:

slider.on('slideStop', function(ev) {
    let value= ev.value; //try ev if you want to see all
    console.log(value);
})

Regards

Gulley

Answer 6

So I have seen this type of thing a lot. You can do one of the following (AFAIK):

var slider;

$(function () { 
    var slider = $("#slider-vertical").slider({ 
        orientation: "horizantal",
        range: "min",
        min: 0,
        max: 100,
        value: 60, 
        slide: function (event, ui) { 
            $("#amount").val(ui.value); 
        } 
    }); 

    $("#amount").val(slider.slider("value")); 
});

function UpdateSlider(PhaseInStatusReportVal) {
    slider.slider("value").val(PhaseInStatusReportVal);
}

or

$("#slider-vertical").slider().slider("value").val(PhaseInStatusReportVal);

I like the first option better.

Modulation

Are you getting the same exception with both options? – Modulation

.slider("value") returns the value, not a jQuery object. You can't invoke .val() on that – Mestee