# @flourish/slider 中文文档规范地址：https://npmcn.com/package/%40flourish/slider/ 版本：3\.1\.0 npm 元数据更新时间：2026-08-19T18:13:38.431Z 中文译文更新时间：2026-11-15T11:24:53.271Z 软件包许可：BSD-3-Clause 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。原始 npm 页面：https://www.npmjs.com/package/%40flourish/slider 原文对照：https://npmcn.com/package/%40flourish/slider/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：182 kB，22 个文件 - 模块格式：ES Module - TypeScript 类型：未声明 - 运行依赖：4 个 - 首次发布：2017-01-10T11:18:04.749Z - 最新版本发布：2025-05-30T09:09:58.652Z - 近 30 天下载量：2035（2026-10-15 至 2026-11-13，npm 官方下载统计） - 已发布版本数：18（近 12 个月 0 个） ## 中文简介滑动 UI 组件 ## 安装 ```sh npm install @flourish/slider ``` 也可以使用：`pnpm add @flourish/slider`、`yarn add @flourish/slider`、`bun add @flourish/slider` ## README # 面粉滑动组件滑动器组件提供了可配置的滑动器控制. 我们开发了用于 [面粉](https://flourish.studio/) 模板, 但这是开源的,你可以用来做任何事情. ```js import Slider from "@flourish/slider"; var slider = Slider("#year-slider") .domain([2000, 2017]) .startLabel("2000").endLabel("2017") .snap(true) .on("change", function(year) { console.log("Year set to", year); }) .draw(); ``` 它被开发成ES6模块,你可以使用它 [滚出.js](http://rollupjs.org/) 财务报告和审定财务报表 [卷起插孔-节点-溶解](https://github.com/rollup/rollup-plugin-node-resolve), (中文(简体) ), 或另一种ES6相容的模块捆绑器. 或者可以直接从网络中包含文件 : ```html ``` 滑动器使用 [D3级](https://d3js.org/)。如果您在页面上已经使用 D3,那么您可以包含一个使用 `d3` 对象,而不是包含文件中的D3代码. ```html ``` 若您没有将D3用于其他目的 `-full` 捆绑, 因为它是使用卷起来构建的, 仅仅包括它实际使用的D3元素. # 交互式实例 [代码](https://codepen.io/robinhouston/pen/xgqWMR) # 在面粉模板中使用滑块在面粉模板中使用滑动器的典型方法是创建模块级变量在您使用的每个幻灯片的模板源中,以及其值的状态属性: ```js var year_slider; export var state = { … year: 2000 }; ``` ## 在那个 `draw()` 函数创建滑块, 从状态设置其值, 并绘制 : ```js slider = Slider("#slider") .domain([2000, 2017]) .startLabel("2000").endLabel("2017") .snap(true) .value(state.year) .on("change", function(year) { // If the user drags the slider, update the state and the graphic state.year = year; update(); }) .draw(); ``` ## 在那个 `update()` 函数从状态更新滑块 : ```js slider.value(state.year).update(); ``` 就这样! 如果您遵循这个模式, 您的滑动器将正确工作视觉编辑和故事编辑. # 全文参考 - [构造器](https://npmcn.com/package/%40flourish/slider/#readme-constructor) - [方法](https://npmcn.com/package/%40flourish/slider/#readme-methods) - [`.draw()`](https://npmcn.com/package/%40flourish/slider/#readme-draw) - [`.update()`](https://npmcn.com/package/%40flourish/slider/#readme-update) - [`.value()`](https://npmcn.com/package/%40flourish/slider/#readme-value) - [`.on(event, handler)`](https://npmcn.com/package/%40flourish/slider/#readme-on-event-handler) - [活动](https://npmcn.com/package/%40flourish/slider/#readme-events) - [这个 `change` 事件](https://npmcn.com/package/%40flourish/slider/#readme-change) - [设置](https://npmcn.com/package/%40flourish/slider/#readme-settings) - [核心设置](https://npmcn.com/package/%40flourish/slider/#readme-core-settings) - [`domain`](https://npmcn.com/package/%40flourish/slider/#readme-domain) - [`snap`](https://npmcn.com/package/%40flourish/slider/#readme-snap) - [`width`](https://npmcn.com/package/%40flourish/slider/#readme-width) - [`height`](https://npmcn.com/package/%40flourish/slider/#readme-height) - [样式设置](https://npmcn.com/package/%40flourish/slider/#readme-style-settings) - [`margin`](https://npmcn.com/package/%40flourish/slider/#readme-margin) - [`handleRadius`](https://npmcn.com/package/%40flourish/slider/#readme-handleradius) - [`handleFill`](https://npmcn.com/package/%40flourish/slider/#readme-handlefill) - [`channelHeight`](https://npmcn.com/package/%40flourish/slider/#readme-channelheight) - [`channelRadius`](https://npmcn.com/package/%40flourish/slider/#readme-channelradius) - [`channelFill`](https://npmcn.com/package/%40flourish/slider/#readme-channelfill) - [轴设置](https://npmcn.com/package/%40flourish/slider/#readme-axis-settings) - [`axis`](https://npmcn.com/package/%40flourish/slider/#readme-axis) - [`scale`](https://npmcn.com/package/%40flourish/slider/#readme-scale) - [`ticks`](https://npmcn.com/package/%40flourish/slider/#readme-ticks) - [`tickFormat`](https://npmcn.com/package/%40flourish/slider/#readme-tickformat) - [`tickSize`](https://npmcn.com/package/%40flourish/slider/#readme-ticksize) - [标签设置](https://npmcn.com/package/%40flourish/slider/#readme-label-settings) - [`label`](https://npmcn.com/package/%40flourish/slider/#readme-label) - [`labelSize`](https://npmcn.com/package/%40flourish/slider/#readme-labelsize) - [`startLabel`](https://npmcn.com/package/%40flourish/slider/#readme-startlabel) - [`startLabelBelow`](https://npmcn.com/package/%40flourish/slider/#readme-startlabelbelow) - [`endLabel`](https://npmcn.com/package/%40flourish/slider/#readme-endlabel) - [`endLabelBelow`](https://npmcn.com/package/%40flourish/slider/#readme-endlabelbelow) - [`startEndLabelSize`](https://npmcn.com/package/%40flourish/slider/#readme-startendlabelsize) - [属性](https://npmcn.com/package/%40flourish/slider/#readme-properties) - [版本](https://npmcn.com/package/%40flourish/slider/#readme-version) ## 构造器 `Slider(selector)` 创建将引入 DOM 元素的滑动器由 `selector`。这可以是 HTML 元素或 SVG ``。。。 . ## 方法 ### `.draw()` 画出滑相. ### `.update()` 基于 [设置](https://npmcn.com/package/%40flourish/slider/#readme-settings) 你变了。如果滑动器没有出现已绘制,然后调用 `.update()` 将画出它. ### `.value()` 获取滑动器的当前位置, 单位: [域名](https://npmcn.com/package/%40flourish/slider/#readme-domain)。。。 . ### `.value(value)` 设置滑动器的位置。图形不会更新直到您调用 [`.update()`](https://npmcn.com/package/%40flourish/slider/#readme-update), (中文(简体) ), 将滑动器移动到您调用的 12 个位置 `slider.value(12).update()`。。。 . ### `.on(event, handler)` 附上事件处理器。唯一支持的事件是 [`change`](https://npmcn.com/package/%40flourish/slider/#readme-change)。您可以附加同一事件的多个处理者,他们都会酌情开火. ## 活动 ### `change` 当用户通过拖动手柄来移动滑动器时,更改事件会起火点击频道。事件处理器通过滑动器的新值作为论据,及其 `this` 对象是滑动实例. ## 设置通过调用幻灯片对象上的同名方法来应用设置以新值作为参数。这些方法返回滑动对象,所以可以锁上它们。例如,您可以将维度设置为200×50 ```js slider.width(200).height(50); ``` 您可以通过调用没有的方法获取设置的当前值参数,例如:. ```js var handle_radius = slider.handleRadius(); ``` ### 核心设置 #### `domain` 表示滑动器可取值范围的由两个数字组成的阵列. 默认为 `[0, 1]`。。。 . #### `snap` 若为 `true`,按最近的全数。如果排序的数组,请按数组中最近的值。默认为 `false`,它提供了连续滑轮. #### `width` 滑动元素的宽度。如果没有具体说明,则滑轮填满整个容器. 如果滑动器元素在滑动器时没有被渲染绘制, 例如如果它是样式 `display: none`,然后是宽度和高度 _必须_ 指定 ### `height` 滑动元素的高度。只有在下列情况下才应供应: `width` 还提供. ### 样式设置 #### `margin` 此对象应具有属性 `top`, (中文(简体) ), `left`,以及 `right`。。。 . 如果其中任何属性被省略或无效, 库将尝试根据其他参数选择一个合理的比值。 (没有) 如果你使用始末标签默认为 `{ top: null, left: null, right: null }`。。。 . #### `handleRadius` 圆滑柄的半径. 未提供时默认为15个. #### `handleFill` 指柄之色相. 默认为 `black`。手柄也可以在 CSS 中被样式化使用 `.slider-handle` 课. #### `channelHeight` 滑道高处. 未提供时默认为15个. #### `channelRadius` 频道角的半径. 默认为无效, 也就是一半频道H8,使频道圆形结束. #### `channelFill` 道所取之色相. 默认为 `#eee`。频道也会在 CSS 中样式化使用 `.slider-channel` 课. ### 轴选项 #### `axis` 若为 `true`,在滑动器下方显示一轴。如果有的话 [`d3-axis`](https://github.com/d3/d3-axis) 对象,使用以定义轴。默认为 `false`,表示没有轴. 接下来的几个选项只影响轴 : #### `scale` #### `ticks` #### `tickFormat` #### `tickSize` 这些都对应同名选项 [`d3-axis`](https://github.com/d3/d3-axis)。。。 . 他们只是真正有用的结合 `.axis(true)`:如果你正在建造自己的轴对象,可以在将其传递给滑动器之前将这些选项直接设置在轴对象上. ### 标签选项 #### `label` 在滑动上方绘制标签文字。默认为无效, 这意味着没有标签 . #### `labelSize` 标签字体大小。默认为 18. 标签也可以在 CSS 中使用 `.slider-label` 课. #### `startLabel` 要绘制到滑动器左侧的文字。默认为无效。您可能需要调整边距, 才能为这个标签腾出空间 . #### `startLabelBelow` 是否在滑动器下绘制起始标签。默认为 `false`左边画的. #### `endLabel` 要绘制到滑条右侧的文字。默认为无效。您可能需要调整边距, 才能为这个标签腾出空间 . #### `endLabelBelow` 是否绘制幻灯片下方的尾标签。默认为 `false`右转. #### `startEndLabelSize` 始末标签的字体大小。默认为16. 起始和结尾标签也可以在 CSS 中被命名使用 `.slider-end-labels` 课. ## 属性 ### `version` `Slider.version` 使用 [语义版本](http://semver.org/)。。。 . ## 常见问题 ### @flourish/slider 是什么？滑动 UI 组件 ### 如何安装 @flourish/slider？在项目目录运行 npm install @flourish/slider，或使用 pnpm add / yarn add / bun add。 ### @flourish/slider 支持 TypeScript 吗？该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flourish\_\_slider 是否存在。 ### @flourish/slider 支持 ESM 还是 CommonJS？以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @flourish/slider 可以商用吗？ @flourish/slider 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。 ### @flourish/slider 的下载量有多少？根据 npm 官方下载统计，@flourish/slider 在 2026/10/15 – 2026/11/13 这 30 天内被下载 2,035 次，日均约 68 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @flourish/slider 还在维护吗？最新版本 3\.1\.0 发布于 2025/05/30（1\.5 年前）；至今共发布 18 个版本，其中过去 12 个月发布了 0 个；首次发布于 2017/01/10。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。