Slider

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={true} 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, Slider, Page } from "zmp-ui";

function PageSlider() {
  return (
    <Page className="page">
      <Box mb={4}>
        <Slider defaultValue={50} max={100} label="Label" showValue />
      </Box>
    </Page>
  );
}

export default PageSlider;

Range Slider

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

function PageSlider() {
  return (
    <Page className="page">
      <Box mb={4}>
        <Slider defaultValue={[3, 7]} marks max={10} />
      </Box>
    </Page>
  );
}

export default PageSlider;