如何用jQuery获取range输入框的所有可选数值列表？

要实现这个需求，核心逻辑是先读取range输入框的min、max、step属性值，再从最小值开始，以步长为间隔逐步累加，直到数值不超过最大值，把这些值收集起来就是所有可选的数值列表。

实现代码 #

HTML结构

<input name="somename" min="1" max="10" step="1" type="range" class="slideThumb">

jQuery实现代码

// 获取目标range元素
const $range = $('.slideThumb');
// 读取属性并转换为数字类型（HTML属性默认返回字符串）
const min = parseFloat($range.attr('min'));
const max = parseFloat($range.attr('max'));
const step = parseFloat($range.attr('step'));

// 存储所有可选数值的数组
const validValues = [];

// 从最小值开始，按步长累加生成数值列表
for (let currentVal = min; currentVal <= max; currentVal += step) {
    // 处理浮点数精度问题（比如0.1+0.2出现的精度偏差）
    validValues.push(Math.round(currentVal * 100) / 100);
}

// 输出结果，格式和示例一致
console.log('可选数值列表：', validValues.join(','));

补充说明 #

• 若range输入框未显式设置min或step，会自动使用HTML默认值：min=0、step=1，代码可兼容这种场景
• 浮点数精度处理逻辑可以根据实际需求调整精度位数（比如需要保留3位小数就改成Math.round(currentVal * 1000) / 1000）

内容的提问来源于stack exchange，提问作者Yan Mak