Change jQuery mobile slider value

Question

I am trying to reset or change the value of a jQuery slider based on a button click, but no luck. What am I doing wrong?

http://jsfiddle.net/yXXVr/

<input class="ui-hidden-accessible" type="range" name="slider1" id="slider1" value="50" min="0" max="100" animate="true" /> <br/> <br> <input class="ui-hidden-accessible" type="range" name="slider2" id="slider2" value="50" min="0" max="100" animate="true" /> <br/> <input type="button" data-theme="a" id="go-back" value="Done"></input> $('#go-back').click(function () { $("#slider1").val(50).refresh(); } 

Answer 1

There were a few errors in your jsFiddle. There were several syntax errors, as well as an additional click handler defined for the Finish button.

 <input class="ui-hidden-accessible" data-track-theme="b" data-theme="a" type="range" name="slider1" id="slider1" value="50" min="0" max="100" animate="true" /> <br/> <br> <input class="ui-hidden-accessible" data-track-theme="b" data-theme="a" type="range" name="slider2" id="slider2" value="50" min="0" max="100" animate="true" /> <br/> <input type="button" data-theme="a" id="go-back" value="Done" ></input> 

Then in JS you were missing the closing bracket and semicolon at the very end, as well as calling .refresh() instead of .slider("refresh")

 $('#go-back').click(function () { debugger; $("#slider1").val(50).slider("refresh"); }); 

Check out the updated script for a working sample.

http://jsfiddle.net/yXXVr/2/

Answer 2

A few things:

First remove onclick from the demo:

 <input type="button" data-theme="a" id="go-back" value="Done" onclick="minbutton_clicked()"></input> 

to

 <input type="button" data-theme="a" id="go-back" value="Done"></input> 

Secondly, you did not close the .click() function:

 $('#go-back').click(function () { $("#slider1").val(50).refresh(); } ^----- need ) 

Third, .refresh() does not exist. You need to use the refresh method :

 $('#go-back').click(function () { $("#slider1").val(50).slider("refresh"); }); 

DEMO: http://jsfiddle.net/dirtyd77/yXXVr/3/

Answer 3

 <input type='range' min='0' max='100' value='0' id='slider' /> <input type='button' value='change value' id="changeval" /> $("#changeval").click(function () { $("#page").page(); $("#slider").val(30).slider('refresh'); }) 

#page links to a page where #slider exists.