Range

概述

Range是滑动输入条组件，基于sl-range渲染，通过拖动滑块在数值区间内取值，常用于音量、进度、百分比等连续数值的直观调节。

示例

声明一个滑动条字段只需要指定widget: 'range'：

const form = document.querySelector('#form');
form.state = {
    volume: configurable(50, {
        label: '音量',
        widget: 'range',
    }),
};

loading

指南

基础用法

默认取值区间为0-100：

form.state = {
    progress: configurable(0, {
        label: '进度',
        widget: 'range',
    }),
};

步长

通过step控制每次拖动的增量：

form.state = {
    volume: configurable(50, {
        label: '音量',
        max: 100,
        step: 5, 
        widget: 'range',
    }),
};

值展示

滑块上方会显示当前值，配合toView可以自定义展示格式：

form.state = {
    volume: configurable(5, {
        label: '音量',
        max: 100,
        step: 5,
        toView: (value) => `${value}%`, 
        widget: 'range',
    }),
};

属性

属性	类型	默认值	说明
max	number	100	最大值
min	number	0	最小值
step	number	1	步长

注意事项

• Range的值是数值类型，确保初始值、min、max、step同为数字。
• 拖动过程中触发input，松手后触发change，按需配合validate校验时机。