RangeControls用于从一系列增量值中进行选择。
RangeControl可以包含以下元素：
- 轨道：轨道表示滑块的整个表面区域，从用户选择的最小值到用户选择的最大值。对于从左到右（LTR）语言，最小值显示在最左边，最大值显示在极右边。对于从右到左（RTL）语言，此方向相反，最小值在最右边，最大值在最左边。
- 轨道：轨迹表示从最小值到当前选定值的轨道部分。
- 拇指：拇指沿轨迹滑动，通过其位置显示选定的值。
- 值输入字段：值输入字段显示当前选定的特定数值。
- 偶像（可选）：可以在滑块之前或之后显示图标。
- 刻度线（可选）：勾号代表用户可以将滑块移动到的预定值。
连续滑块
连续滑块允许用户沿主观范围选择值。它们不显示选定的数值。在显示/编辑数值时使用它们，例如体积。
离散滑块
离散滑块可以通过引用其值输入字段调整为特定值。当显示/编辑数值（如文本大小）很重要时使用它们。
可能的选择可以通过使用勾号来组织，拇指将捕捉到勾号（或输入将向上或向下取整到勾号）。
- 单击并拖动：通过单击拇指并拖动滑块来控制滑块。
- 点击跳转：通过单击轨迹控制滑块。
- 单击并箭头：通过单击拇指，然后使用箭头键移动滑块来控制滑块。
- 制表符和箭头：通过使用tab键选择所需滑块的拇指，然后使用箭头键移动滑块来控制滑块。
- 值输入字段：离散滑块具有值输入字段。输入文本后，滑块位置会自动更新以反映新值。
- 刻度标记（可选）离散滑块可以沿滑块轨迹使用等间距的记号标记，拇指将捕捉到它们。每个勾号应以用户可以识别的增量更改设置。
RangeControls反映轨迹上的一系列值，用户可以从中选择单个值。它们非常适合调整音量、不透明度或文本大小等设置。
RangeControls可以在轨迹的两端具有反映值范围的图标。
直接影响
RangeControls所做的更改是即时的，允许用户进行调整，直到找到他们的首选项。它们不应与延迟提供反馈的设置配对。
不要这样
如果效果不是即时的，请不要使用RangeControls。
当前状态
RangeControls反映其控制的设置的当前状态。
值
具有可编辑数值的RangeControl
可编辑数值：可编辑的数值允许用户设置RangeControl的精确值。设置值后，拇指位置会立即更新以匹配新值。
不要这样
RangeControls只能用于从一系列值中选择选项（例如，如果只有2个值，则不要使用RangeControl）。
不要这样
RangeControls应该为用户提供可供选择的全部选项（例如，不要只禁用RangeControl的一部分）。
渲染RangeControl以从一系列增量值中进行选择。
从'react'导入{useState}；从“@wordpress/components”导入{RangeControl}；const MyRangeControl=（）=>{const[columns，setColumns]=使用状态（2）；返回(<范围控制__next无边距底部label=“列”值={columns}onChange={（值）=>setColumns（值）}最小值={2}最大值={10}/>);};
组件可接受的支柱设置如下所示。
此集合中未包含的属性将应用于输入元素。
如果添加此属性图标组件将在滑块后渲染，图标等于after图标.
有关的详细信息图标类型请参阅图标组件.
如果此属性为true，则会呈现重置滑块的按钮。
如果添加此属性图标组件将在滑块之前呈现，图标等于beforeIcon之前图标.
有关的详细信息图标类型请参阅图标组件.
的CSS颜色字符串RangeControl（范围控制）包装器。
用作后备的当前输入，如果价值当前为未定义.
禁用输入，阻止应用新值。
如果添加此属性，将使用帮助属性作为内容生成帮助文本。
控制标签是否仅对屏幕阅读器可见。
在其容器标题旁边的滑块上方显示的图标。
滑块起始位置，在没有价值已通过。这个initialPosition（初始位置）将夹在提供的最小值和最大值属性值。
作为道具传递给数字控件组件，仅适用于以下情况带InputField是真的。如果为true，则在数字输入有焦点时按向上或向下以及SHIFT（轮班）键将按shiftStep（换档步骤）值。
如果添加此属性，将使用label属性作为内容生成标签。
呈现的可视化表示步滴答声。自定义标记指示器可以由阵列.
例子：
常量标记=[{值：0，标签：“0”，},{值：1，标签：“1”，},{值：8，标签：“8”，},{值：10，标签：“10”，},];常量MyRangeControl（）{return（<RangeControl标记={marks}最小值={0}最大值={10}步长={1}/>）}
何时回拨RangeControl（范围控制）输入失去焦点。
接收新值的函数。该值将小于最大值并且超过最小值除非重置（由启用allowReset（允许重置）)已发生。在这种情况下，值将为重置回退值如果有规定或其他未定义.
何时回拨RangeControl（范围控制）投入获得关注。
鼠标退出时的回调RangeControl（范围控制）.
鼠标在中移动时的回调RangeControl（范围控制）.
最小值价值允许。
最大值价值允许。
自定义轨道元素背景的CSS颜色字符串。
自定义值的呈现UI的方法。例子：
const customTooltipContent=value=>`${value}%`常量MyRangeControl（）{return（<RangeControl renderTooltipContent={customTooltipContent}/>）}
单击重置按钮时要恢复的值（由启用allowReset（允许重置）)
定义是否应禁用控制行下/上的分隔线或全宽分隔线。默认情况下，它位于下面，不包括控件图标的下划线。
作为道具传递给数字控件组件，仅适用于以下情况带InputField和ShiftStep已启用都为true，并且数字输入有焦点。充当的乘数步.
强制显示或隐藏工具提示UI。这被覆盖为假什么时候步设置为特殊字符串值任何.
最低金额价值变化。这也是验证中的一个因素价值必须是的倍数步（偏移量为最小值)有效。接受特殊字符串值任何使验证约束失效并覆盖两者带InputField和show工具提示道具到假.
自定义轨迹元素背景的CSS颜色字符串。
定义值选择是否应在移动设备的底部工作表中显示步进控件或滑块控件。要使用步进器，请将类型值设置为步进器。如果未提供选项，则默认为滑块。
范围滑块的当前值。
确定输入数字字段将在RangeControl旁边呈现。这被覆盖为假什么时候步设置为特殊字符串值任何.
开始选择更大的默认高度，这将成为未来版本的默认大小。
开始选择新的无边距样式，这将成为未来版本的默认样式。