Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

changing jQuery mobile slider value

I am trying to reset or change the value of a jQuery slider based on the clicking of a button but to 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();
}
like image 612
jaynp Avatar asked Dec 27 '22 00:12

jaynp


2 Answers

There were a few things wrong with what you had in your jsFiddle. There were a few syntax errors, as well as an extra click handler defined for the Done 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 the JS, you were missing a closing parenthesis & 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 this updated fiddle for a working sample.

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

like image 188
p e p Avatar answered Jan 09 '23 08:01

p e p


Few things:

First, remove onclick from 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>

Second, 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 refresh method:

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

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

like image 44
Dom Avatar answered Jan 09 '23 08:01

Dom