Represents a sliding picker.
Since: 1.0.0
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
min | number | 0 | No | Minimum value. |
max | number | 100 | No | Maximum value. |
step | number | 1 | No | Step size. The value must be greater than 0 and can be evenly divided by (max - min). |
disabled | boolean | false | No | Disabled or not. |
value | number | 0 | No | Current value. |
activeColor | color | #0A59F7 | No | Color of the selected item. |
backgroundColor | color | rgba(0, 0, 0, 0.098) | No | Background color of the slider track. |
block-size | number | 16 | No | Size of the slider, ranging from 12 to 28. |
block-color | color | #ffffff | No | Color of the slider. |
show-value | boolean | false | No | Whether to display the current value. |
bindchange | eventhandle | - | No | Event handler triggered after a drag operation, with event.detail = {value}. |
bindchanging | eventhandle | - | No | Event handler triggered during dragging, with event.detail = {value}. |
HXML file:
<view class="page-body">
<view class="page-section page-section-gap">
<view class="page-section-title">Set step to 5</view>
<view class="body-view">
<slider value="60" bindchange="slider2change" step="5" show-value />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Display the current value</view>
<view class="body-view">
<slider value="50" bindchange="slider3change" show-value />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Do not display the current value</view>
<view class="body-view">
<slider value="50" bindchange="slider4change" />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Set min to 50 and max to 200</view>
<view class="body-view">
<slider
value="100"
bindchange="slider5change"
min="50"
max="200"
show-value="{{showValue}}"/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Set the color</view>
<view class="body-view">
<slider
value="30"
bindchange="slider6change"
activeColor="#de01fc"
backgroundColor="gray"
min="0"
max="100"
show-value/>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Slider settings</view>
<view class="body-view">
<slider
value="0"
bindchange="slider7change"
block-color="orange"
block-size="18"
min="0"
max="100"
show-value/>
</view>
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Slider size</view>
<view class="body-view">
<slider block-size="{{20}}" />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Slider color</view>
<view class="body-view">
<slider block-color="#FF0000" />
</view>
</view>
<view class="page-section page-section-gap">
<view class="page-section-title">Dynamic settings</view>
<view class="body-view">
<slider
value="{{currentValue}}"
step="{{setStep}}"
bindchange="sliderchange"
bindchanging="bindchanging"
activeColor="{{setActiveColor}}"
backgroundColor="{{setBackgroundColor}}"
min="0"
max="100"
show-value="{{isShowValue}}"
block-size="{{setBlockSize}}"
block-color="{{setBlockColor}}"/>
</view>
</view>
<view style="margin-left: 30rpx; margin-top: 30rpx"
>bindchange event trigger: {{currentValue}}</view>
<view style="margin-left: 30rpx; margin-top: 30rpx"
>bindchanging event trigger: {{changingValue}}</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Display the current value</view>
<view class="ascf-cell__ft">
<switch checked="{{isShowValue}}" bindchange="changeShowValue" />
</view>
</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Set step to 1 or 5</view>
<view class="ascf-cell__ft">
<switch checked="{{isSetStep}}" bindchange="changeStep" />
</view>
</view>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Set color of the selected item</view>
<view class="-cell__ft">
<switch checked="{{isSetActiveColor}}" bindchange="changeActiveColor" />
</view>
</view> JS file:
const pageData={
data: {
isShowValue: true,
currentValue: 30,
changingValue: '',
setStep: 1,
isSetStep: false,
isSetActiveColor: false,
isSetBackgroundColor: false,
setActiveColor: '#1aad19',
setBackgroundColor: '#e9e9e9',
setBlockSize: '28',
isSetBlockSize: false,
setBlockColor: '#ffffff',
isSetBlockColor: false,
showValue: true,
},
sliderchange(e) {
this.setData({
currentValue: e.detail.value,
});
},
bindchanging(e) {
this.setData({
changingValue: e.detail.value,
});
},
changeShowValue() {
this.setData({
isShowValue: !this.data.isShowValue,
});
},
changeStep() {
this.setData({
setStep: !this.data.isSetStep ? 5 : 1,
isSetStep: !this.data.isSetStep,
});
},
changeActiveColor() {
this.setData({
setActiveColor: !this.data.isSetActiveColor ? '#de01fc' : '#1aad19',
isSetActiveColor: !this.data.isSetActiveColor,
});
},
changeBackgroundColor() {
this.setData({
setBackgroundColor: !this.data.isSetBackgroundColor ? 'gray' : '#e9e9e9',
isSetBackgroundColor: !this.data.isSetBackgroundColor,
});
},
changeBlockSize() {
this.setData({
setBlockSize: !this.data.isSetBlockSize ? '10' : '28',
isSetBlockSize: !this.data.isSetBlockSize,
});
},
changeBlockColor() {
this.setData({
setBlockColor: !this.data.isSetBlockColor
? 'rgb(238, 3, 247)'
: '#ffffff',
isSetBlockColor: !this.data.isSetBlockColor,
});
},
}
for (var i = 1; i < 8; ++i) {
(function (index) {
pageData[`slider${index}change`] = function (e) {
console.log(`A change event occurs in slider${index}. Carried value: `, e.detail.value);
};
})(i);
}
Page(pageData)