{ "slug": "numberrangeinput", "mode": "single", "examples": [ { "id": "numberrangeinput-ex-1", "title": "基础用法", "titleSrc": "", "desc": "", "html": "
\n \n —\n \n 元\n \n
", "preview": { "show": [ [ 0 ] ], "hide": [], "mode": "single" }, "previewSafe": true, "previewUnsafeReasons": [], "source": "curated", "code": { "html": "
\n \n —\n \n 元\n \n
", "jsx": "import { useState } from 'react';\nimport { KoleNumberRangeInput } from 'kole-ui/react';\n\nexport default function PriceRange() {\n const [range, setRange] = useState(['', '']);\n return (\n \n );\n}", "vue3": "\n\n", "vue2": "\n\n", "tsx": "import { useState } from 'react';\nimport { KoleNumberRangeInput } from 'kole-ui/react';\n\ntype RangeTuple = readonly [string, string];\n\ninterface RangeConfig {\n min: number;\n max: number;\n step: number;\n separator: string;\n unit: string;\n placeholder: RangeTuple;\n}\n\nconst config: RangeConfig = {\n min: 0,\n max: 10000,\n step: 1,\n separator: '—',\n unit: '元',\n placeholder: ['最小', '最大'],\n};\n\nexport default function PriceRange(): JSX.Element {\n const [range, setRange] = useState(['', '']);\n return (\n \n );\n}", "vue3ts": "\n\n", "vue2ts": "\n\n" }, "notes": "依据 frameworks/NumberRangeInput.html L25 的 STEP=1 / MIN=0 / MAX=10000、L13-16 两个 input 占位「最小」「最大」与分隔符「—」、单位「元」、L31-33 校验文案;prop 名取自 NumberRangeInput.jsx L4-7(value/step/min/max/separator/unit/placeholder/onChange)与 NumberRangeInput.vue3.vue L15-23(modelValue 等)。" } ], "curated": true }