简介
react-bootstrap-slider-talater 是一个 react 的 npm 包，用于在 react 项目中快速添加 bootstrap 样式的滑块和范围滑块。它是基于 talater/bootstrap-slider 这个 jQuery 插件封装而来，操作简单且可以提供多种自定义效果。
在实际项目开发中，滑块这个组件往往会比较常见，react-bootstrap-slider-talater 这个 npm 包的出现可以方便快捷地实现这个功能。本篇文章将详细介绍如何使用这个npm包以及一些需要注意的细节。
安装与使用
安装
在终端环境中使用 npm 进行安装
npm i react-bootstrap-slider-talater --save
引入
在 react 组件中引入该 npm 包
import ReactBootstrapSlider from 'react-bootstrap-slider-talater' import 'bootstrap-slider/dist/css/bootstrap-slider.min.css'
使用
在 render 函数中使用 <ReactBootstrapSlider /> 组件，实现 bootstrap 样式的滑块或范围滑块。
-- -------------------- ---- -------
-------- -
------ -
-----
---------------------
------------------------
--------------------------
--------
---------
-------
----------------------
---------------
--
------
-
-常用参数
value（必填）
默认值，可以是一个数字或者包含两个数字的数组，用于表示范围滑块的初始位置。
change
每次滑块被改变时都会触发的回调函数。
change={(event, newValue) => this.setState({ value: newValue })}step
每次滑块移动的间隔值。
step={100}max
滑块的最大值。
max={100}min
滑块的最小值。
min={1}orientation
滑块的方向，vertical 为垂直方向，horizontal 为水平方向。
orientation='vertical'
reversed
范围滑块两个滑块的位置反转。
reversed={true}高级用法
样式自定义
使用了 npm 包中的 css 文件后，可以使用 bootstrap-slider 原生的 样式来进行自定义。
事件绑定
可以直接在组件中绑定各个 bootstrap-slider 的事件。
-- -------------------- ---- -------
------ -------- ----------- ------------------- -------------------- -------------------- ---------------------------
--------
------------------
-------- --------
--
---------------- -------------------
----------------------------
---
---------实例代码
以下为范围滑块的示例代码:
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ ----------------------------------------------------
------ -------------------- ---- --------------------------------
----- ----------- ------- --------- -
----- - -
----------- ---- ---
-
------------ - ------- --------- -- -
--------------- ----------- -------- --
-
-------- -
------ -
---- --------------- ---------
---------------------
-----------------------------
--------------------------
--------
---------
-------
--
-------- --------------------------------- - ------------------------------
------
-
-
-
------ ------- -----------小结
react-bootstrap-slider-talater 是一个非常不错的轮子，它提供了快速实现滑块和范围滑块的功能；同时也支持 style 的自定义和 event 的绑定等高级功能，适合各种实际项目需求。需要注意的是，该 npm 包是基于 talater/bootstrap-slider 制作的，前者的具体功能细节与样式风格都是在后者的基础上进行改编的，因此在使用过程中应该也要注意这些细节。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005533781e8991b448d07bf