Skip to main content

slider

Last updated on

slider component cho phép bạn chọn giá trị bằng việc kéo thả trong một phạm vi nhất định.

Khả dụng: Được hỗ trợ từ running version 1.73.13 trở lên.

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
namestringKhai báo name khi được sử dụng trong form, được sử dụng để lấy value cho form
valuenumber0Giá trị hiện tại của slider
minnumber0Giá trị nhỏ nhất của slider
maxnumber100Giá trị lớn nhất của slider
stepnumber1Chỉ định mỗi lần tăng/giảm bao nhiêu đơn vị, step phải lớn hơn 0 và là số được chia hết bởi maxmin
disabledbooleanfalseDisable slider
show-tooltipbooleantrueHiển thị tooltip hay không
active-colorstring#1a94ffMàu của thanh giá trị đang được active
background-colorstringrgba(0, 0, 0 , 0.1)Màu của nền của slider
handle-colorstring#ffffffMàu của nền của vòng tròn toggle
track-sizenumber8Kích thước của thanh đang được active
handle-sizenumber24Kích thước của vòng tròn toggle
rail-sizenumber4Kích thước của vòng thanh slider
controlledbooleanfalseKhi giá trị là true, giá trị của slider sẽ được điều khiển hoàn toàn thông qua hàm setData trong file js
onChangeeventSự kiện được gọi khi giá trị bị thay đổi và người dùng đã không còn chạm vào slider, event.detail = { value: value }
onChangingeventSự kiện được gọi khi giá trị bị thay đổi và người dùng vẫn còn chạm vào slider, event.detail = { value: value }

Sample Code

Một số component được sử dụng trong source API Demo.

index.json
{
"defaultTitle": "slider",
"usingComponents": {
"list-item": "@tiki.vn/tini-ui/es/list/list-item/index",
"block-header": "components/block-header/index",
"block-variant": "components/block-variant/index"
}
}
index.txml
<view class="page">
<block-header title="Usage"
description="Slider allow users to select option(s) within a range." />

<block-variant header="Variants" title="State" description="Default, Hover, Focus, Active and Disabled.">
<view class="item">
<slider value="{{value}}" onChange="onChange" onChanging="onChanging" />
</view>
<view class="item">
<slider disabled value="{{20}}" />
</view>
</block-variant>
</view>
index.js
Page({
data: {
value: 0
},
onChange(e) {
console.log('onChange: ', e);
},
onChanging(e) {
console.log('onChanging: ', e);
}
});
index.tcss
.item {
margin-top: 32px;
}