滑块范围

范围滑块是一个输入字段，商家可以使用它在给定的范围内(最小值和最大值)选择一个数值。

之间使用单个值时使用0和100需要选择。

进口｛卡，RangeSlider｝从“@shopify /北极星”；进口｛useState，useCallback｝从“反应”；函数RangeSliderExample（）｛常量［rangeValue，setRangeValue］＝useState（32）；常量handleRangeSliderChange＝useCallback（（价值）= >setRangeValue（价值），［］，）；返回（<卡片分段标题＝“背景色”><RangeSlider标签＝“不透明度”价值＝｛rangeValue｝onChange＝｛handleRangeSliderChange｝输出/></卡>）；｝

道具

想要帮助完善这个功能吗?请分享你的反馈．

接口 RangeSliderProps

标签 ReactNode: 范围输入的标签。
labelAction?: 向标签添加一个操作。
labelHidden? 布尔: 在视觉上隐藏标签。
id? 字符串: 范围输入的ID。
价值数量|（[数量，数量]）: 范围输入的初始值。
最小值? 数量: 范围输入的最小可能值。
马克斯? 数量: 范围输入的最大可能值。
一步? 数量: 范围输入更改的增量值。
输出? 布尔: 滑动时提供工具提示，指示当前值。
helpText? ReactNode: 辅助使用的附加文本。
错误? 任何: 显示错误消息。
禁用? 布尔: 禁用输入。
前缀? ReactNode: 元素在输入之前显示。
后缀? ReactNode: 元素在输入后显示。
onChange （价值：数量|（[数量，数量]），id：字符串) = >无效: 当范围输入被改变时。
得到焦点? () = >无效: 当范围输入聚焦时回调。
元素失去焦点时? () = >无效: 当焦点被移除时回调。

最佳实践

范围滑块应该:

总是和标签一起使用，即使那个标签是隐藏的．
当一个标签是可见的，它应该清楚地传达输入范围的目的及其值(min, max, step, value)
当你需要请求非必需的输入时，将其标记为“可选”
在商家完成与字段的交互后立即验证输入(但不是在此之前)
当范围滑块有双拇指时，总是与两个文本字段组件一起使用，以提供可访问的替代方案来同时使用上下拇指

内容的指导方针

范围内的标签

标签是对请求输入的简短描述。标签不是指导性的文本，但它们应该是有意义的，并清楚地表明期望什么。标签应该是:

置于表单字段之上
简洁明了(1-3个词)
以句式形式书写(第一个单词大写，其余字母小写)

做

饱和百分比
横幅宽度

不

饱和度是多少?
横幅宽度为:

指定可选字段

试着只问必要的信息。如果您需要要求商家提供可选信息，请在字段标签的末尾放置文本“(可选)”，将该字段标记为可选。不要用星号标记必填项。

做

横幅宽度(可选)

不

横幅宽度

帮助文本

帮助文本为填写表单字段的人提供额外的指导或指示。它也可以用来澄清信息将如何使用。与所有表单内容一样，帮助文本应该简洁且易于阅读。

做

视频时长以秒为单位计算

不

示例:134秒

验证错误消息

错误消息应该:

清楚地解释出了什么问题以及如何解决
要简洁明了，不要超过一句话
使用被动语态这样商家就不会觉得他们是错误的罪魁祸首

做

视频时长要求

不

您没有输入持续时间

要收集一个数字值作为文本输入，使用文本字段组件

可访问性

范围滑块为滑块拇指提供了一个大的点击和点击目标。商家也可以轻按或点击滑块轨道移动最近的滑块拇指。

Single-thumb滑块

默认范围滑块组件使用ARIA 1.1滑块模式来构建默认的HTML范围< input type = " " >．所需的标签Prop为字段提供了一个标签，该标签在接收到焦点时传递给辅助技术。当使用滑块时，价值Prop应该以可视和编程的方式更新，以反映当前值。

要始终如一地为辅助技术提供当前值，请使用最小值而且马克斯为滑块提供最小值和最大值的道具。

Dual-thumb滑块

双拇指范围滑块组件使用ARIA 1.1滑块(多拇指)模式．然而，屏幕阅读器并不总是支持这种模式，尤其是在移动设备上。因此，最好将双拇指滑块与每个值的一组文本字段配对，或者为输入信息提供另一种可访问的方法。

键盘

要将焦点移动到滑块拇指，请按选项卡键前进和或转变+选项卡向后移动
当拇指有焦点时，使用上下或左右方向键移动拇指并更新相关值。