ant-design/components/slider/index.zh-CN.md
二货爱吃白萝卜 cbcfd38ca7
docs: v5 site upgrade (#38328)
* build: try to use dumi as doc tool

* docs: migrate demo structure to dumi way

* refactor: use type export & import

* docs: migrate demo previewer to dumi

* docs: create empty layout & components

* docs: apply custom rehype plugin

* docs: create empty extra pages

* docs: Add Banner component

* chore: move theme tsconfig.json

* docs: home page init

* docs: migrate header (#37896)

* docs: header

* docs: update

* docs: home init

* clean up

* test: fix site lint

* chore: tsc ignore demo

* chore: dumi demo migrate script

* chore: cards

* docs: home layout

* docs: Update locale logic

* docs: fix getLink logic

* chore: fix ci (#37899)

* chore: fix ci

* ci: remove check-ts-demo

* ci: preview build

* test: ignore demo.tsx

* chore: update script

* test: update snapshot

* test: update node and image test

* chore: add .surgeignore

* docs: layout providers (#37908)

* docs: add components sidebar (#37923)

* docs: sidebar

* docs: update docs title

* docs: update design doc

* chore: code clean

* docs: handle changelog page

* docs: add title

* docs: add subtitle

* docs: active header nav

* chore: code clean

* docs: overview

* chore: code clean

* docs: update intl (#37918)

* docs: update intl

* chore: code clean

* docs: update favicons

* chore: update testPathIgnorePatterns

* chore: code clean

* chore: code clean

* chore: copy 404.html (#37996)

* docs: Home page theme picker

* chore: Update migrate script

* docs: home page update

* docs: theme editor style

* docs: theme lang

* chore: update migrate.js

* docs: fix demo (#38094)

* chore: update migrate.js

* docs: update md

* docs: update demo

* test: fix snapshot

* chore: move debug to code attr in migrate script

* chore: update md

Co-authored-by: PeachScript <scdzwyxst@gmail.com>

* feat: overview page

* feat: Migrate `404` page (#38118)

* feat: migrate IconSearch component (#37916)

* feat<site/IconSearch>: copy IconDisplay from site to .dumi

* feat<site/IconSearch>: change docs of icon

* feat<site/IconSearch>: tweak

* feat<site/IconSearch>: use useIntl instead of injectIntl

* feat<site/IconSearch>: fix ts type error

* feat<site/IconSearch>: use intl.formatMessage to render text

* docs: Adjust home btn sizw

* docs: Update doc

* feat: v5 site overview page (#38131)

* feat: site

* fix: fix

* feat: v5 site overview page

* fix: fix path

* fix: fix

* fix: fix

* docs: fix margin logic

* feat: v5 site change-log page (#38137)

* feat: v5 site change-log page (#38162)

* docs: site redirect to home pag

* docs: theme picker

* docs: use react-intl from dumi (#38183)

* docs: Theme Picker

* docs: update dumi config

* docs: home back fix

* docs: picker colorful

* docs: locale of it

* docs: update components desc

* docs: site of links

* docs: update components list

* docs: update desc

* feat: Migrate `DemoWrapper` component (#38166)

* feat: Migrate `DemoWrapper` component

* feat: remove invalid comments and add comment for `key` prop

* docs: FloatButton pure panel

* chore: update demo

* chore: update dumi config

* Revert "chore: update demo"

This reverts commit 028265d3ba5987df5f13c3e9d42cf76cb1812b2e.

* chore: test logic adjust to support cnpm modules

* chore: add locale alias

* docs: /index to /

* docs: add locale redirect head script

* chore: adjust compact

* docs: fix missing token

* feat: compact switch

* chore: code clean

* docs: update home

* docs: fix radius token

* docs: hash of it

* chore: adjust home page

* docs: Add background map

* docs: site theme bac logic

* docs: avatar

* docs: update logo color

* docs: home banner

* docs: adjust tour size

* docs: purepanl update

* docs: transfooter

* docs: update banner gif

* docs: content (#38361)

* docs: title & EditButton

* docs: content

* chore: fix toc

* docs: resource page

* docs: transform resource data from hast

* docs: filename & Resource Card

* chore: enable prerender

* chore: remove less

* docs: toc style

* chore: fix lint

* docs: fix Layout page

* docs: fix CP page

* chore: update demos

* docs: workaround for export dynamic html

* chore: enable demo eslint

* docs: table style

* fix: header shadow

* chore: update snapshot

* fix: toc style

* docs: add title

* docs: Adjust site

* feat: helmet

* docs: site css

* fix: description

* feat: toc debug

* docs: update config-provider

* feat: use colorPanel

* fix: colorPanel value

* feat: anchor ink ball style

* feat: apply theme editor

* fix: code block style

* chore: update demo

* chore: fix lint

* chore: code clean

* chore: update snapshot

* feat: ts2js

* chore: description

* docs: site ready for ssr

includes:
- move client render logic to useEffect in site theme
- extract antd cssinjs to a single css file like bisheng
- workaround to support react@18 pipeableStream for emotion

* chore: bump testing lib

* docs: font size of title

* chore: remove react-sortable-hoc

* chore: update snapshot

* chore: update script

Co-authored-by: PeachScript <scdzwyxst@gmail.com>
Co-authored-by: MadCcc <1075746765@qq.com>
Co-authored-by: zqran <uuxnet@gmail.com>
Co-authored-by: TrickyPi <530257315@qq.com>
Co-authored-by: lijianan <574980606@qq.com>
2022-11-09 12:28:04 +08:00

3.7 KiB
Raw Blame History

category subtitle group title cover demo
Components 滑动输入条 数据录入 Slider https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
cols
2

滑动型输入器,展示当前值和可选范围。

何时使用

当用户需要在数值区间/自定义区间内进行选择时,可为连续或离散值。

代码演示

基本 带输入框的滑块 带 icon 的滑块 自定义提示 事件 带标签的滑块 垂直 控制 ToolTip 的显示 反向 范围可拖拽

API

参数 说明 类型 默认值 版本
allowClear 支持清除, 单选模式有效 boolean false
defaultValue 设置初始取值。当 range 为 false 时,使用 number否则用 [number, number] number | [number, number] 0 | [0, 0]
disabled 值为 true 时,滑块为禁用状态 boolean false
dots 是否只能拖拽到刻度上 boolean false
included marks 不为空对象时有效,值为 true 时表示值为包含关系false 表示并列 boolean true
marks 刻度标记key 的类型必须为 number 且取值在闭区间 [min, max] 内,每个标签可以单独设置样式 object { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } }
max 最大值 number 100
min 最小值 number 0
range 双滑块模式 boolean | range false
reverse 反向坐标轴 boolean false
step 步长,取值必须大于 0并且可被 (max - min) 整除。当 marks 不为空对象时,可以设置 step 为 null此时 Slider 的可选值仅有 marks 标出来的部分 number | null 1
tooltip 设置 Tooltip 相关属性 tooltip - 4.23.0
value 设置当前取值。当 range 为 false 时,使用 number否则用 [number, number] number | [number, number] -
vertical 值为 true 时Slider 为垂直方向 boolean false
onAfterChange onmouseup 触发时机一致,把当前值作为参数传入 (value) => void -
onChange 当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入 (value) => void -

range

参数 说明 类型 默认值 版本
draggableTrack 范围刻度是否可被拖拽 boolean false 4.10.0

tooltip

参数 说明 类型 默认值 版本
open 值为 true 时Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时 boolean - 4.23.0
placement 设置 Tooltip 展示位置。参考 Tooltip string - 4.23.0
getPopupContainer Tooltip 渲染父节点,默认渲染到 body 上 (triggerNode) => HTMLElement () => document.body 4.23.0
formatter Slider 会把当前值传给 formatter,并在 Tooltip 中显示 formatter 的返回值,若为 null则隐藏 Tooltip value => ReactNode | null IDENTITY 4.23.0

方法

名称 描述 版本
blur() 移除焦点
focus() 获取焦点