• slider 滑动选择器
  • 属性说明
  • 示例
    • 代码示例 1：默认样式
    • 代码示例 2：显示当前取值
    • 代码示例 3：自定义最大 / 最小值
    • 代码示例 4：自定义步长
    • 代码示例 5：自定义样式

slider 滑动选择器

解释：滑动选择器。

属性说明

min

Number

0

否

最小值

max

Number

100

否

最大值

step

Number

1

否

步长，取值必须大于 0，并且可被 max - min 整除

disabled

Boolean

false

否

是否禁用

value

Number

0

否

当前取值

backgroundColor

Color

#cccccc

否

背景条的颜色

block-size

Number

24

否

滑块的大小，取值范围为 12-28

block-color

Color

#ffffff

否

滑块的颜色

activeColor

Color

#3c76ff

否

已选择的颜色

show-value

Boolean

false

否

是否显示当前 value

bindchange

EventHandle

否

完成一次拖动后触发的事件，event.detail = {value: value}

bindchanging

EventHandle

否

拖动过程中触发的事件，event.detail = {value: value}

示例

跳转编辑工具

在开发者工具中打开

在 WEB IDE 中打开

扫码体验

代码示例

请使用百度APP扫码

代码示例 1：默认样式

• SWAN
• JS

 
 
 
  
  
  
  
  
  
 
  
  
  
 默认样式
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="0"
  
  
  
 max="1500"
  
  
  
 value="200"
  
  
  
 step="30"
  
  
  
 bind:change="sliderChange"
  
  
  
 bind:changing="sliderChanging"
  
  
  
 disabled="false">
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 2：显示当前取值

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 显示当前取值
  
  
  
 show-value
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="0"
  
  
  
 max="200"
  
  
  
 value="30"
  
  
  
 show-value
  
  
  
 step="30"
  
  
  
 bind:change="sliderChange"
  
  
  
 disabled="false">
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 3：自定义最大 / 最小值

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 自定义最大/最小值
  
  
  
 min="200" max="1500"
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="200"
  
  
  
 max="1500"
  
  
  
 value="400"
  
  
  
 show-value step="30"
  
  
  
 bind:change="sliderChange"
  
  
  
 disabled="false">
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 4：自定义步长

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 自定义步长
  
  
  
 step="30"
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="0"
  
  
  
 max="1500"
  
  
  
 value="200"
  
  
  
 step="30"
  
  
  
 bind:change="sliderChange"
  
  
  
 disabled="false">
  
  
  
 
  
  
  
 
  
  
  
 
 

代码示例 5：自定义样式

• SWAN

 
 
 
  
  
  
  
  
  
 
  
  
  
 
  
  
  
 自定义样式
  
  
  
 block-size="16" block-color="#3388FF"
  
  
  
 
  
  
  
 
  
  
  
 class="slider"
  
  
  
 min="0"
  
  
  
 max="1500"
  
  
  
 value="200"
  
  
  
 step="30"
  
  
  
 block-size="16"
  
  
  
 block-color="#3388FF"
  
  
  
 activeColor="#3c76ff"
  
  
  
 backgroundColor="#cccccc"
  
  
  
 disabled="false">