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

Question

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?

effectica · Accepted Answer · 2012-08-09 23:59:48Z

10

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

answered Aug 9, 2012 at 23:59

effectica

7906 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related