jquery - jqueryは変数を入力値の最大値に割り当てます

Question

入力フォームがあり、最大フィールド値に変数を割り当てたいと考えています。

この変数はコンテナの幅です。

ここに私のアンプットhtmlコード：

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

jqueryでどうやってそれを行うことができますか。コンテナの幅を取得して、入力フォームの最大値に割り当てますか?

Answer 1

これを行う1つの方法があります（範囲の値を表示する追加の入力テキストボックスがあります）。

jsfiddle デモ

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());
});

Answer 2

// 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);