jquery assign variable to input value max

Question

I have an input form and I want to assign to the max field value a variable.

This variable is the width of a container.

Here my unput html code :

<input type="range" max="variable" step="1%" value="0"/>

How can I do it with jquery. Get the width of a container then assign it in the max of the input form?

MikeM · Accepted Answer · 2013-04-14 15:34:17Z

1

here's one way to do it (have an additional input textbox to display the range's value).

jsfiddle demo

HTML:

<div id="container">
    <input type="range" max="variable" step="1%" value="0"/>
    <input type="text" />
    <span></span>
</div>

jQuery:

// cache re-usable jQuery elements
var $container = $('#container'),
    $range = $('[type="range"]'),
    $rangeValue = $('[type="text"]');

// initialize values:

// set range max to container width
$range.attr('max', $container.width());
// set rangeValue to range's value
$rangeValue.val($range.val());
// display container's width
$container.find('span').text('container width: ' + $container.width());

// events:

// set the rangeValue on range change
$range.change(function() {
    $rangeValue.val($range.val());
});

// set the range on rangeValue change
$rangeValue.change(function() {
    $range.val($rangeValue.val());
});

answered Apr 14, 2013 at 15:34

MikeM

27.5k4 gold badges68 silver badges80 bronze badges

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

2 Comments

lolo Over a year ago

Thank you I will try it. My input is for a scroll bar using jquery tools. I need to set dynamically the width of the scrollable container.

lolo Over a year ago

I made an example of what I want. I have a touch scroll bar to scroll content inside the #container. I want to set the width of the container inside the max value of the input scroll bar. jsfiddle.net/lolo34140/sQk8a/2

palaѕн · Accepted Answer · 2013-04-14 15:17:52Z

0

// Get the max attr
var arr = $("input").attr('max');
console.log(arr);  // variable 

// Set the max attr
$("input").attr('max', 100);

arr = $("input").attr('max');
console.log(arr);  // 100 

// Get the width of container and set the max attr
var width = $("#containerID").width()
$("input").attr('max', width);

answered Apr 14, 2013 at 15:17

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

3 Comments

lolo Over a year ago

Thank you for the answer but it seems to not working... Does I need to do something in the html input code?

palaѕн Over a year ago

Set the containerID with the id of the container you are using!

lolo Over a year ago

I Already do it. It correctly assign the number but doesn't take it into consideration... If I set manually in the input form the value it works. If it's assign thank to jquery it doesn't have the same behaviour

Collectives™ on Stack Overflow

jquery assign variable to input value max

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related