滑块 Slider丨Framer 文档 Code

Code

滑块可以用来显示进度、调节音量、调整图片、定义价格范围等。使用Slider组件就不用重头开始搭建了。

Slider组件由3个图层构成：滑块本身、填充物、旋钮。滑块本身是指轨迹部分（一般是颜色较浅），旋钮是用来改变滑块的值 value，填充 fill 表示当前选中的值。这些图层的外观可以和其他图层一样自定义。

Slider组件特有的属性：

• min (最小值)
• max (最大值)
• value (起始值)
• knobSize (旋钮的宽高)

# 创建滑块
slider = new SliderComponent
    min: 0
    max: 100
    value: 50
    knobSize: 40
 
# 给填充定义颜色
slider.fill.backgroundColor = "#fff"

滑块本身就是一个图层，也就说所有的可视属性都可以被更改。

# 定义滑块颜色
slider.backgroundColor = "#DDD"
 
# 定义填充颜色 
slider.fill.backgroundColor = "#00AAFF"
 
# 定义旋钮投影 
slider.knob.shadowY = 2

值的变化 Value Changes

onValueChange标签可以检测值的更改，并在更改时检索当前值。

# 添加滑块
slider = new SliderComponent
    min: 0
    max: 100
    value: 50
 
# 获取当前值 
slider.onValueChange ->
    print slider.value

slider-value