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

How to get html range input type's max value through javascript?

本文关键字：输入 类型 最大值 范围 html 何通过 javascript 获取      更新时间：2023-09-26

如果我设置了：

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

使用 .prop（）

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

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

var maxValues = $('input.slider').map(function(){
    return this.max;
}).get();
// ['255', '255']

JS小提琴演示。

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

尝试改用jquery。

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

仅使用 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/

相关文章：