Question

How do I programmatically set the value of a slider in JQuery mobile? I have the following slider defined:

<label for="optionSlider">Are you sure?</label>
<select id="optionSlider" name="slider" data-role="slider">
  <option value="no">No</option>
  <option value="yes">Yes</option>
</select>

When the page is shown, I want to set it to “yes”. I know that I can use the “selected” attribute, but because the value will be dynamic,I need to figure out how to set it programmatically. Currently, I’m using the following:

$("#myPage").live("pageshow", function () {
  var flag = "yes"
  if ((flag != null) && (flag != undefined)) {
    if (isTrackSet == "no") {
      $("#optionSlider", "#myPage").val("no");
    } else {
      $("#optionSlider", "#myPage").val("yes");
    }
  }
}

What am I doing wrong?

Answer 1

You need to call a refresh on your slider:

.slider("refresh");

http://jquerymobile.com/demos/1.0a4.1/docs/forms/forms-slider.html