跳到主要内容

滑动输入条

滑动输入条以滑块的方式展示和调节数值，适用于连续或离散区间的选择。

一、何时使用​

滑动输入条适用于用户在一定区间内自由选择数值的场景，例如：

  • 数值范围选择（如 0~100）
  • 字号调节、音量调节
  • 预算、价格、评分区间过滤
  • 表单中分值评估、数据采集

二、属性配置​

1. 数据设置​

1.1 数据绑定​

支持绑定父组件或页面的数据源，详见：数据绑定。

1.2 初始值设置​

滑块的默认起始值可手动设定或通过视图参数传入：

初始值

2. 功能设置​

功能面板

2.1 双滑块模式​

启用后提供两个滑块，用于选择数值区间（如价格范围）：

双滑块模式

2.2 最小值 / 最大值​

设定滑动输入条的最小值和最大值范围：

最小最大值

2.3 单步长​

定义滑块每次移动时的最小变动数值（步长），如设置为 5，每次滑动变化 5 个单位。

2.4 垂直布局​

支持切换为垂直方向展示滑动输入条：

垂直布局

3. 外观设置​

外观面板

3.1 选中颜色​

设置滑块选中范围的轨道颜色：

选中颜色

3.2 未选中颜色​

设置滑块未选中范围的轨道颜色：

未选中颜色

4. 状态设置​

4.1 只读状态​

开启后，滑动输入条处于只读模式，用户无法更改其值。

其他状态详见：通用状态

三、样式设置​

滑动输入条暂无特殊样式项，样式调整参考：通用样式。

四、常见使用场景​

  1. 字号调节
    阅读类应用中通过滑块调整字体大小：

    字号调节示例

  2. 预算区间设置
    数据采集中让用户设定期望的预算范围：

    预算设定示例