javascript - 如何通过javascript获取html范围输入类型的最大值？

Question

如果我设置了：

<input class="slider" type="range" min="0" max="100">
<input class="slider" type="range" min="0" max="255">

如何使用 jQuery/JavaScript 获取最小值和最大值？

我以后想做这样的事情，我可以得到最大值并将其解析为变量maxValue。

if (maxValue == 100) {console.log("100");}
else if (maxValue == 255) {console.log("255");}

Answer 1

使用.prop()

var minValue= $('.slider[type="range"]').prop('min');
var maxValue = $('.slider[type="range"]').prop('max');

Answer 2

对于最大值数组，只需访问max元素的属性：

var maxValues = $('input.slider').map(function(){
    return this.max;
}).get();

// ['255', '255']

JS 小提琴演示。

显然，要找到max特定元素的 ，请使用特定的选择器。

Answer 3

尝试使用 jquery 代替..

$("#slider").slider(
{
            value:100,
            min: 0,
            max: 500,
            step: 50,
            slide: function( event, ui ) {
                $( "#slider-value" ).html( ui.value );
            }
}
);

Answer 4

仅使用JavaScript，您可以将值传递给函数：

在 HTML 中：

<input class="slider" type="range" min="0" max="100" onchange="showResult(this.min, this.max)">
<p id=max>Max value will appear here</p>
<p id=min>Min value will appear here</p>

在 JavaScript 中：

function showResult(min, max) {
    // Use min and max variables as desired

    // Display min and max in HTML
    document.getElementById('max').innerHTML = max;
    document.getElementById('min').innerHTML = min;
}

在这里试试https://jsfiddle.net/vdja45xo/