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
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

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;