Nhảy tới nội dung
Phiên bản: 1.7.0

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

NameTypeDefaultDescription
minnumbergiá trị nhỏ nhất trong khoảng chọn
maxnumbergiá trị lớn nhất trong khoảng chọn
stepnumberbước chọn
minRangenumberKhoảng cách nhỏ nhất trong trường hợp sử dụng range slider
showValuebooleanHiện thị giá trị
marksboolean | 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.ReactNodeTuỳ chỉnh hiển thị giá trị của Slider (showValue: true)
labelstring

Thêm nhãn cho Slider

prefixReactNodePrefix icon cho Slider
suffixReactNodeSuffix icon cho Slider
namestring

Thêm name cho Slider input

valueSliderValueGiá trị của Slider (controlled)
defaultValueSliderValueGiá trị mặc định của Slider
onChange(value: SliderValue) => voidThêm event handler khi giá trị của Slider thay đổi

Type

SliderValue

TypeDescription
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 (
    <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;