数字输入组件演示

基础用法

默认配置：最小值0，最大值100，步长1

当前值: 0

// 基础用法
mlwTools.createNumberInput('basicNumberInput', {
    value: 0,
    min: 0,
    max: 100,
    step: 1,
    onChange: (value) => {
        document.getElementById('basicValue').textContent = value;
    }
});
            

自定义范围

范围：-50 到 50，步长5

当前值: 0

// 自定义范围
mlwTools.createNumberInput('customRangeInput', {
    value: 0,
    min: -50,
    max: 50,
    step: 5,
    onChange: (value) => {
        document.getElementById('customValue').textContent = value;
    }
});
            

小数步长

范围：0 到 10，步长0.1

当前值: 0

// 小数步长
mlwTools.createNumberInput('decimalInput', {
    value: 0,
    min: 0,
    max: 10,
    step: 0.1,
    onChange: (value) => {
        document.getElementById('decimalValue').textContent = value.toFixed(1);
    }
});
            

动态控制

可以通过代码动态修改范围和值

当前值: 25

// 动态控制
let dynamicController = mlwTools.createNumberInput('dynamicInput', {
    value: 25,
    min: 0,
    max: 100,
    step: 1,
    onChange: (value) => {
        document.getElementById('dynamicValue').textContent = value;
    }
});

function setRandomValue() {
    dynamicController.setValue(Math.floor(Math.random() * 101));
}

function setRandomRange() {
    const min = Math.floor(Math.random() * 50);
    const max = min + Math.floor(Math.random() * 50) + 10;
    dynamicController.setMin(min);
    dynamicController.setMax(max);
}
            

使用说明

点击按钮：使用 + 和 - 按钮来增减数值
键盘操作：在输入框中可以使用上下箭头键来增减数值
直接输入：可以直接在输入框中输入数值
自动限制：输入的值会自动限制在设定的最小值和最大值之间
按钮状态：当达到最小值或最大值时，相应的按钮会被禁用