Cannot call methods on slider until attempt to initialize call to 'value' method

Question

I use the following code for the 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 a value for a slider:

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

I call the code above:

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

but it throws the above error.

Can anybody help me?

Answer 1

Have you considered a different approach. Set up a hidden field with an initial value -> fill in the value from the code, and then do something like:

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

I hope I understood your requirements correctly.

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(); 

Answer 3

To set the value of the slider, you need to use the method

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

Demo: Fiddle

Answer 4

So, I saw 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.