React Suite 滑块组件

React Suite 是一套基于 React 构建的 UI 组件库，其中包括了滑块组件slider，用来在一个范围内选择一个数值。

安装

# 使用 npm 安装
npm install rsuite

# 或使用 yarn 安装
yarn add rsuite

使用

导入组件

import { Slider } from 'rsuite';

基本用法

<Slider defaultValue={50} />

自定范围

<Slider min={0} max={100} defaultValue={50} />

显示刻度

<Slider
  min={0}
  max={100}
  defaultValue={50}
  graduated
  renderMark={(mark) => {
    return mark % 10 === 0 ? mark.toString() : '';
  }}
/>

自定义样式

<Slider
  min={0}
  max={100}
  defaultValue={50}
  progressClassName="custom-progress"
  handleClassName="custom-handle"
/>

API

Slider

Props

| 名称 | 类型 | 默认值 | 说明 | | ----------------- | --------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | value | number | - | 滑块的值 | | defaultValue | number | 0 | 滑块的初始值 | | onChange | (value: number) => {} | - | 滑块值发生变化时的回调函数 | | min | number | 0 | 滑块可选取的最小值 | | max | number | 100 | 滑块可选取的最大值 | | step | number | 1 | 滑块步进值 | | graduated | boolean | false | 是否显示刻度 | | renderMark | (value: number) => {} | - | 自定义刻度内容函数 | | progressClassName | string | - | 自定义滑块激活状态（滑块值在选中范围内）的样式 | | handleClassName | string | - | 自定义滑块的样式 | | disabled | boolean | false | 禁用滑块 | | vertical | boolean | false | 垂直布局 | | tooltip | boolean | false | 是否显示tooltip提示 | | tooltipPlacement | PlacementType | 'top' | tooltip的展示位置, 可选值为'bottom', 'left', 'right' 'top' 或者其他由popper.js支持的Placement values| | tooltipPrefix | string | '' | tooltip前缀内容 | | tooltipSuffix | string | '' | tooltip后缀内容 |

结束语

React Suite 滑块组件slider是一个非常实用的UI组件，可以适用于多种场景，同时也支持自定义样式和刻度显示。在日常开发中，使用 React Suite 的滑块组件可以节省我们的开发时间，提高程序员的工作效率。