CODEWITHSUNDEEP
jqueryhtml
Newbie
Newbie

Reputation: 249

How to change the input values, min value and max value in the input type=range using jquery?

I'm new to jquery and html5.

My jquery is:

var A_Route=['A1','A2','A3',.....'A50'];
var counter=0;
$("input[name='radio-choice']").change(function(){
    if ($(this).val() == "on")
    {
        $('#slider').val(A_Route[counter]);

    }

When I select a radio button whose value is ON the min and max value for the slider should automatically become A1 and A50 respectively. And as I slide through the slider my values should change from A1 to A50.

My Html Is:

<div data-role="fieldcontain">
                <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend>Layout view:</legend>
                          <input type="radio" name="radio-choice" id="radio-choice-c" value="on" checked="checked" />
                          <label for="radio-choice-c">List</label>
                          <input type="radio" name="radio-choice" id="radio-choice-d" value="off" />
                          <label for="radio-choice-d">Grid</label>
                          <input type="radio" name="radio-choice" id="radio-choice-e" value="other" />
                          <label for="radio-choice-e">Gallery</label>
                            </fieldset>
           </div>

<div data-role="fieldcontain">
        <label for="slider">Room:</label>
        <input type="range" name="slider" id="slider" value="--------" min=? max=? data-highlight="true"  />
</div>

What do you think the min and max code should be? and How can I change the input values from A1 to A50?

Upvotes: 7

Views: 24600

Answers (1)

effectica
effectica

Reputation: 790

The value of the input slider should only be any valid floating point number. So I don't think it is going to work with the min max values you want to use.

With regards to the jQuery code to set min and max attributes, you should use the attribute method:

    $('#slider').attr('min', A_Route[0]);
    $('#slider').attr('max', A_Route[3]);

See it working here

Upvotes: 10

Related Questions