Slider

Cập nhật lần cuối: 27/05/2022

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
defaultValue	number | Tuple		Tương tự như value, nhưng giá trị này chỉ được sử dụng để khởi tạo giá trị cho slider khi nó được render lần đầu tiên. Thay đổi giá trị này sau khi render sẽ không có tác dụng.
label	string		Nhãn của slider, được hiển thị phía trên slider.
marks	boolean | number[]	false	Các điểm cần đánh dấu trên slider. Thiết lập true sẽ đánh dấu ứng với mỗi step trên slider. Nếu chỉ cần đánh dấu một vài giá trị tuỳ ý, truyền vào một mảng các giá trị cần được dánh dấu.
max	number	100	Giá trị kết thúc của slider.
min	number	0	Giá trị bắt đầu của slider.
minRange	number		Khoảng cách tối thiểu giữa 2 giá trị được chọn của slider. Chỉ có tác dụng khi sử dụng với range slider (value là một mảng 2 phần tử).
name	string		Tên định danh của slider trong form.
prefix	React.ReactNode		Phần tử được hiển thị ở bên trái slider.
renderValue	(value: number | Tuple) => React.ReactNode		Hàm dùng để định dạng giá trị hiển thị khi showValue được bật. Hàm này nhận vào (các) giá trị được chọn của slider và trả về một ReactNode để hiển thị.
showValue	boolean	false	Hiển thị giá trị hiện tại của slider ở góc trên bên phải, ngang hàng với label. Có thể sử dụng cùng với renderValue nếu cần bổ sung cơ chế tính toán hoặc tuỳ chỉnh nội dung cho giá trị hiển thị.
step	number	1	Bước nhảy của slider. Có thể là một số nguyên hoặc số thập phân.
suffix	React.ReactNode		Phần tử được hiển thị ở bên phải slider.
value	number | Tuple		Giá trị được chọn hiện tại của slider (đối với slider một con trỏ) và mảng chứa 2 giá trị được chọn (đối với slider 2 con trỏ, còn gọi là range slider). Cần được sử dụng cùng với onChange để cập nhật giá trị khi người dùng thay đổi.
onChange	(value: number | Tuple) => void		Callback được gọi khi giá trị của slider thay đổi. Tham số truyền vào là giá trị hoặc cặp giá trị mới của slider.

Example

Slider

Open Sandbox

import React from "react";
import { Box, Text, Slider, Page, Icon } from "zmp-ui";

function PageSlider() {
  return (
    <Page className="section-container">
      <Text.Title size="small">Slider</Text.Title>
      <Box mb={4} mt={4}>
        <Slider defaultValue={50} label="Label" />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={50} max={100} label="Label" showValue />
      </Box>
      <Box mb={4}>
        <Slider
          label="Label"
          defaultValue={50}
          prefix={<Icon icon="zi-gallery" />}
          suffix={<Icon icon="zi-gallery" />}
        />
      </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}>
        <Slider defaultValue={[20, 40]} />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={3} marks max={4} />
      </Box>
      <Box mb={4}>
        <Slider defaultValue={[3, 7]} marks={[1, 5, 10]} max={10} />
      </Box>
    </Page>
  );
}

export default PageSlider;