rangeSliderComponent

范围组件可以使用两个把手来调节一个范围。你可以用它来定义或编辑一个数字范围,比如价格筛选。它由四个图层组成,滑槽(也即组件本身)、填充区、最大值把手和最小值把手。

The RangeSliderComponent creates a range slider with two knobs. You can use it to define and edit a numeric range, like a price filter. It consists of four layers: the slider itself, the fill, the minKnob and the maxKnob.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center

范围组件的填充区(选中的范围)默认是深色的,滑槽是浅灰色的背景,整个滑槽的两侧是圆角。填充区的圆角和滑槽 slider 是相关联的,所以只用给它们之一设置圆角。

By default, the slider has a dark fill color, a light-gray backgroundColor and rounded corners with borderRadius. The radius of the fill automatically matches with that of the slider, so you only need to set it once.

# Customize the appearance
range.backgroundColor = "#ddd"
range.borderRadius = 4

rangeSlider.min <number>

范围组件的最小范围,默认值是 0 。

The mininum range of the slider. Set to 0 by default.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center
min: 0
max: 10

rangeSlider.max <number>

范围组件的最大范围,默认值是 1 。

The maximum range of the slider. Set to 1 by default.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center
min: 0
max: 10

rangeSlider.minValue <number>

范围组件的最小值,默认是 0 。

The minimum value of the slider. Set to 0 by default.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center
minValue: 0

你可以单独监听最小值的变化。

You can exclusively listen to minimum value changes.

range.onMinValueChange ->
print range.minValue

你也可以同时使用 Value 改变事件监听范围变化。

You can also listen to any value changes using the Value Change event.

range.onValueChange ->
print range.minValue, range.maxValue

rangeSlider.maxValue <number>

范围组件的最大值,默认是0.5 。

The maximum value of the slider. Set to 0.5 by default.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center
maxValue: 0.5

你可以单独监听最大值的变化。

You can exclusively listen to maximum value changes.

range.onMaxValueChange ->
print range.maxValue

你也可以同时使用 Value 改变事件监听范围变化。

You can also listen to any value changes using the Value Change event.

range.onValueChange ->
print range.minValue, range.maxValue

rangeSlider.knobSize <number>

两个把手的尺寸。它的值是两个把手的宽和高,默认是 30 。

The size of both knobs. This automatically sets the width and height of the minKnob and the maxKnob. The default value is 30.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center
# Change the size of the knobs
range.knobSize = 40

rangeSlider.fill <layer>

范围组件的填充区,它的宽和高是跟着整个范围组件自动变化的。它的默认背景色是 #333

The fill of the slider. The width and height are automatically updated, based on the size of the slider. By default, its backgroundColor is set to #333.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center
# Set the fill color to blue
range.fill.backgroundColor = "#00AAFF"

rangeSlider.minKnob <layer>

调节最小值的把手。

The knob that influences the minimum value of the slider.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center

它是一个可拖动的图层,带着动量模拟。

The minKnob is a draggable layer, with momentum enabled.

# 禁止动量模拟
range.minKnob.draggable.momentum = false

rangeSlider.maxKnob

调节最大值的把手。

The knob that influences the maximum value of the slider.

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center

它是一个可拖动的图层,带着动量模拟。

The maxKnob is a draggable layer, with momentum enabled.

# 禁止动量模拟
range.maxKnob.draggable.momentum = false

rangeSlider.animateToMinValue(minValue, animationOptions)

自动以动画形式调节到指定的最小值。

Automatically animate to a specific minimum value.

参数

  • minValue — 一个数字,指定的最小值。

  • animationOptions — 一个动画选项对象,包含动画曲线、时间、延迟和重复属性。(可选)

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center
# Animate to 1
range.animateToMinValue(0.3)
# Animate with a custom curve
range.animateToMinValue(0.3, { curve: Spring })

rangeSlider.animateToMaxValue(maxValue, animationOptions)

自动以动画形式运动到指定最大值。

Automatically animate to a specific maximum value.

参数

  • maxValue — 一个数字,指定的最大值。

  • animationOptions — 一个动画选项对象,包含动画曲线、时间、延迟和重复属性。(可选)

# Create a range slider
range = new RangeSliderComponent
x: Align.center
y: Align.center
# Animate to 1
range.animateToMaxValue(1)
# Animate with a custom curve
range.animateToMaxValue(1, { curve: Spring })