{
  "slug": "slider",
  "end": "react",
  "curated": true,
  "summary": "滑块：value 给数值或区间，range 等为布尔 props，拖拽与输入都回调 onChange。",
  "usage": [
    "React 端一条组件覆盖单值与区间两种形态：range 为真时 value/defaultValue 是 [lo, hi] 数组（Slider.jsx:23,31,51-53）。",
    "拖拽用指针事件实现：按下时挂载 window 上的 pointermove/pointerup，抬起后移除（Slider.jsx:63-69）。",
    "点击轨道也可改值，且会选距离更近的手柄：range 模式下比较两端距离决定拖哪个（Slider.jsx:70-79）。",
    "showInput 打开后渲染受控的数字输入框，与滑块共享同一份 value，输入即联动（Slider.jsx:81-89,123-134）。",
    "刻度数量由 min/max/step 推导，而不是手工传刻度数组：Array.from 生成 tickPercents（Slider.jsx:97-100）。"
  ],
  "bestPractices": [
    "step 必须能整除量程方向上的取值，clamp 里用 Math.round 归一到步长，非整除会导致末值取不到 max（Slider.jsx:35-36）。",
    "range 模式下区间始终升序：赋值后组件会 sort，父组件不必自己保证顺序（Slider.jsx:52,75）。",
    "showInput 的数字框没有额外的空值保护，输入空字符串会被转成 NaN，业务侧应在 onChange 里做兜底。"
  ],
  "apiCarrier": {
    "kind": "props",
    "note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
    "table": [
      {
        "name": "value",
        "type": "number | [number, number]",
        "desc": "受控值，区间模式下为两元素数组"
      },
      {
        "name": "defaultValue",
        "type": "number | [number, number]",
        "desc": "非受控初始值"
      },
      {
        "name": "min",
        "type": "number",
        "desc": "最小值，默认 0"
      },
      {
        "name": "max",
        "type": "number",
        "desc": "最大值，默认 100"
      },
      {
        "name": "step",
        "type": "number",
        "desc": "步长，取值会按它归一"
      },
      {
        "name": "range",
        "type": "boolean",
        "desc": "双滑块区间模式"
      },
      {
        "name": "showTicks",
        "type": "boolean",
        "desc": "显示刻度"
      },
      {
        "name": "showInput",
        "type": "boolean",
        "desc": "显示联动的数值输入框"
      },
      {
        "name": "disabled",
        "type": "boolean",
        "desc": "禁用拖拽与输入"
      },
      {
        "name": "onChange",
        "type": "(value) => void",
        "desc": "值变化回调，拖拽与输入框共用"
      }
    ]
  },
  "a11y": [
    "滑块本体是 div 而非 input[type=range]（Slider.jsx:104-121），无 role=\"slider\"、无 aria-valuenow/aria-valuemin/aria-valuemax，键盘与读屏都无法操作。",
    "range 模式下两个手柄都是无标签的 div，视觉用户只能靠位置判断，是明确的可访问性缺口。",
    "showInput 渲染的原生数字输入框是唯一可键盘操作与可读屏的入口，需要无障碍支持时应打开它。"
  ],
  "resources": [
    {
      "file": "frameworks/Slider.jsx",
      "kind": "React（React）",
      "desc": "React 端组件实现源码，props 与回调的唯一定义处"
    },
    {
      "file": "frameworks/Slider.css",
      "kind": "样式",
      "desc": "该 React 实现依赖的样式文件"
    }
  ],
  "exampleIds": [
    "slider-ex-1",
    "slider-ex-2",
    "slider-ex-3",
    "slider-ex-4"
  ],
  "notes": [
    "frameworks/Slider.jsx:9 中可指到 value（number | [number, number]）——受控值，区间模式下为两元素数组",
    "frameworks/Slider.jsx:9 中可指到 defaultValue（number | [number, number]）——非受控初始值",
    "frameworks/Slider.jsx:10 中可指到 min（number）——最小值，默认 0",
    "frameworks/Slider.jsx:10 中可指到 max（number）——最大值，默认 100",
    "frameworks/Slider.jsx:10 中可指到 step（number）——步长，取值会按它归一",
    "frameworks/Slider.jsx:11 中可指到 range（boolean）——双滑块区间模式",
    "frameworks/Slider.jsx:12 中可指到 showTicks（boolean）——显示刻度",
    "frameworks/Slider.jsx:13 中可指到 showInput（boolean）——显示联动的数值输入框",
    "frameworks/Slider.jsx:14 中可指到 disabled（boolean）——禁用拖拽与输入",
    "frameworks/Slider.jsx:15 中可指到 onChange（(value) => void）——值变化回调，拖拽与输入框共用",
    "props 解构清单见 frameworks/Slider.jsx:17-28；本文件 table 只列该端真正消费的属性与回调。",
    "过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/Slider.jsx 全文），它们不是对外 props，因此未进 table。",
    "table 构成核验：10 行中 10 行是 frameworks/Slider.jsx 解构出的顶层 props（解构块 frameworks/Slider.jsx:17-28）；本组件 table 全部为顶层 props。"
  ]
}