Set max attribute for the jQueryMobile slider from JavaScript

Question

I have a slider

<div class="slider-container" id="game-mode-slider-container">
                    <label for="game-mode">Game mode</label>
                    <span id="game_mode_indicator" class="slider-indicator">Private</span>
                    <input type="range" name="points" id="game-mode" min="0" value="0">
 </div>

Actually I have couple of them on one page. What I want to do is to set max attr from JavaScript.

$('.ui-shadow-inset.ui-body-inherit.ui-corner-all.ui-slider-input').is('#game-mode').attr('max', '7');
$('.ui-shadow-inset.ui-body-inherit.ui-corner-all.ui-slider-input').is('#game-mode').slider("refresh");

So what I do is I make a selector using class and id both. This doesn't work. If I just use this class it does work, but then I can't have different values for different sliders,because they all have the same class, but different ids. I got this class name using Inspect element in Chrome.

<input type="number" data-type="range" name="points" id="game-mode" min="0" value="0" class="ui-shadow-inset ui-body-inherit ui-corner-all ui-slider-input">

Can someone please help mi with this.

Answer 1

With jQuery, set the prop("max") to the new value and then refresh the jQM slider widget:

$("#game-mode").prop("max", selection).slider("refresh");

Here is a DEMO

(click radio buttons to change the max of the slider.)

Answer 2

Try this:

$('#game-mode').attr('max', '7').slider("refresh");