• 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

否

完成一次拖動后觸發(fā)的事件，event.detail = {value: value}

bindchanging

EventHandle

否

拖動過程中觸發(fā)的事件，event.detail = {value: value}

示例

跳轉(zhuǎn)編輯工具

在開發(fā)者工具中打開

在 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">