145 lines
5.4 KiB
JSON
145 lines
5.4 KiB
JSON
{
|
||
"slug": "slider",
|
||
"end": "html",
|
||
"curated": true,
|
||
"summary": "纯 H5 滑块：角色与 aria 值写在标记上，拖动靠 pointer 事件，填充与手柄位置由脚本改内联样式。",
|
||
"usage": [
|
||
"容器写 role=\"slider\" 与 tabindex=\"0\"，并在标记里给出 aria-valuemin / aria-valuemax 两个边界值。",
|
||
"能力用属性存在性声明：data-slider 初始化、data-range 双滑块、data-ticks 刻度、data-input 数值框，边界值走 data-min / data-max / data-step。",
|
||
"手柄与轨道由脚本用 insertAdjacentHTML 注入（.kole-slider-rail 与 .kole-slider-handle），位置通过百分比改样式。",
|
||
"拖动监听 pointerdown 起手，pointermove / pointerup 挂在 document 上，保证指针移出轨道也不丢。",
|
||
"数值输入框与滑块是双向的：输入框 change 后把值写回滑块，滑块移动后也回写输入框的 value。"
|
||
],
|
||
"bestPractices": [
|
||
"标记只写了 aria-valuemin / aria-valuemax，没有 aria-valuenow：读屏器能知道取值范围但读不出当前值，需要完整语义请自行补这一项。",
|
||
"双滑块要分别维护两个手柄的值并保证低值不超过高值，示例在换算后做了上下界夹取。",
|
||
"刻度由脚本按 data-min / max / step 生成，改边界时这三处要一起改，否则刻度与取值对不上。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "attrs",
|
||
"note": "H5 端没有 props，API 载体是类名（.kole-slider 及轨道/手柄/填充/刻度结构类、is-disabled 状态类）加 data-* 入参钩子与 role/aria 值属性，拖动由页内 pointer 脚本实现。",
|
||
"table": [
|
||
{
|
||
"name": "kole-slider",
|
||
"type": "基础类名",
|
||
"desc": "滑块根容器，带 role=\"slider\" 与 aria 值属性"
|
||
},
|
||
{
|
||
"name": "is-disabled",
|
||
"type": "状态类名",
|
||
"desc": "禁用态，脚本在 pointerdown 时跳过"
|
||
},
|
||
{
|
||
"name": "kole-slider-rail",
|
||
"type": "结构类名",
|
||
"desc": "轨道，脚本用它计算百分比基准"
|
||
},
|
||
{
|
||
"name": "kole-slider-fill",
|
||
"type": "结构类名",
|
||
"desc": "已选区间填充条"
|
||
},
|
||
{
|
||
"name": "kole-slider-handle",
|
||
"type": "结构类名",
|
||
"desc": "拖动手柄，双滑块模式有两个；脚本按它判断是否点在手柄上"
|
||
},
|
||
{
|
||
"name": "kole-slider-ticks",
|
||
"type": "结构类名",
|
||
"desc": "刻度容器，data-ticks 存在时渲染"
|
||
},
|
||
{
|
||
"name": "data-slider",
|
||
"type": "data-* 钩子",
|
||
"desc": "标记滑块容器，脚本据此批量初始化"
|
||
},
|
||
{
|
||
"name": "data-min",
|
||
"type": "data-* 钩子",
|
||
"desc": "最小值"
|
||
},
|
||
{
|
||
"name": "data-max",
|
||
"type": "data-* 钩子",
|
||
"desc": "最大值"
|
||
},
|
||
{
|
||
"name": "data-value",
|
||
"type": "data-* 钩子",
|
||
"desc": "初始值"
|
||
},
|
||
{
|
||
"name": "data-step",
|
||
"type": "data-* 钩子",
|
||
"desc": "步长"
|
||
},
|
||
{
|
||
"name": "data-range",
|
||
"type": "data-* 钩子",
|
||
"desc": "存在即双滑块模式"
|
||
},
|
||
{
|
||
"name": "data-ticks",
|
||
"type": "data-* 钩子",
|
||
"desc": "存在即渲染刻度"
|
||
},
|
||
{
|
||
"name": "data-input",
|
||
"type": "data-* 钩子",
|
||
"desc": "存在即渲染数值输入框"
|
||
},
|
||
{
|
||
"name": "aria-valuemin",
|
||
"type": "原生属性",
|
||
"desc": "最小值语义，标记里写 aria-valuemin=\"0\""
|
||
},
|
||
{
|
||
"name": "aria-valuemax",
|
||
"type": "原生属性",
|
||
"desc": "最大值语义，标记里写 aria-valuemax=\"100\""
|
||
},
|
||
{
|
||
"name": "role",
|
||
"type": "原生属性",
|
||
"desc": "容器与手柄都写 role=\"slider\""
|
||
},
|
||
{
|
||
"name": "tabindex",
|
||
"type": "原生属性",
|
||
"desc": "取值为 0，让滑块可被 Tab 聚焦"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"容器与手柄都写了 role=\"slider\"、tabindex=\"0\" 与 aria-valuemin / aria-valuemax，但缺少 aria-valuenow，当前值对读屏器不可见。",
|
||
"键盘支持未实现：元素可聚焦，但方向键、Home/End 没有监听，键盘用户只能看到焦点却改不了值。",
|
||
"刻度点是纯装饰节点，没有语义；如需读屏器感知请为滑块补 aria-valuetext 说明。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Slider.html",
|
||
"kind": "纯 H5 演示页（内联样式 + 原生脚本）",
|
||
"desc": "Slider.html —— 纯 H5 演示页：单值/刻度/双值/禁用四组结构，含 6 个函数负责渲染、拖动与数值联动"
|
||
},
|
||
{
|
||
"file": "frameworks/Slider.css",
|
||
"kind": "样式文件",
|
||
"desc": "Slider.css —— 本页组件类名的样式定义，由 Slider.html 第 8 行的 <link rel=\"stylesheet\" href=\"Slider.css\"> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"slider-ex-1",
|
||
"slider-ex-2",
|
||
"slider-ex-3",
|
||
"slider-ex-4"
|
||
],
|
||
"notes": [
|
||
"容器上的 aria 值属性写法见（frameworks/Slider.html:28）",
|
||
"双滑块的能力声明见（frameworks/Slider.html:39）",
|
||
"轨道与手柄由脚本注入，见（frameworks/Slider.html:62）",
|
||
"拖动监听挂在 document 上避免丢事件，见（frameworks/Slider.html:150）",
|
||
"轨道点击前的手柄判定见（frameworks/Slider.html:160）"
|
||
]
|
||
}
|