Slider
Tạo giao diện cho phép người dùng lựa chọn gía trị, hoặc khoảng giá trị trong một giới hạn
Properties
Slider
| Name | Type | Default | Description |
|---|---|---|---|
| min | number | giá trị nhỏ nhất trong khoảng chọn | |
| max | number | giá trị lớn nhất trong khoảng chọn | |
| step | number | bước chọn | |
| minRange | number | Khoảng cách nhỏ nhất trong trường hợp sử dụng range slider | |
| showValue | boolean | Hiện thị giá trị | |
| marks | boolean | number[] | Hiển thị điểm chia khoảng trên slider, với marks= chia đều, hoặc, number[] nhận điểm hiển thị marks cụ thể | |
| renderValue | (value: SliderValue) => React.ReactNode | Tuỳ chỉnh hiển thị giá trị của Slider (showValue: true) | |
| label | string | Thêm nhãn cho Slider | |
| prefix | ReactNode | Prefix icon cho Slider | |
| suffix | ReactNode | Suffix icon cho Slider | |
| name | string | Thêm name cho Slider input | |
| value | SliderValue | Giá trị của Slider (controlled) | |
| defaultValue | SliderValue | Giá trị mặc định của Slider | |
| onChange | (value: SliderValue) => void | Thêm event handler khi giá trị của Slider thay đổi |
Type
SliderValue
| Type | Description |
|---|---|
| number | Slider với một giá trị |
| [number,number] | Trường hợp Range Slider (chọn giới hạn trên và dưới) |
Example
Slider
import React from "react";
import { Box, Text, Slider, Page, Icon } from "zmp-ui";
function PageSlider() {
return (
<Text.Title size="small">Slider</Text.Title>
<Box mb={4} mt={4}>
</Box>
<Box mb={4}>
</Box>
<Box mb={4}>
}
suffix={}
/>
</Box>
<Box mb={4}>
<Slider
defaultValue={50}
prefix={<Text size="xSmall">00:00</Text>}
suffix={<Text size="xSmall">04:30</Text>}
/>
</Box>
<Box mb={4}>
</Box>
<Box mb={4}>
</Box>
<Box mb={4}>
</Box>
);
}
export default PageSlider;