{
 "slug": "slider",
 "mode": "scenarios",
 "examples": [
  {
   "id": "slider-ex-1",
   "title": "单滑块 + 数值联动",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"slider-row\">\n    <span class=\"lab\">音量</span>\n    <div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-input data-max=\"100\" data-min=\"0\" data-slider data-value=\"30\"></div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本按可见尺寸测量布局"
   ],
   "source": "curated",
   "code": {
    "html": "<span>音量</span>\n<div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-value=\"30\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleSlider } from 'kole-ui/react';\n\nexport default function VolumeSlider() {\n  const [volume, setVolume] = useState(30);\n  return (\n    <KoleSlider min={0} max={100} value={volume} showInput onChange={setVolume} />\n  );\n}",
    "vue3": "<template>\n  <KoleSlider v-model=\"volume\" :min=\"0\" :max=\"100\" show-input />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst volume = ref(30);\n</script>",
    "vue2": "<template>\n  <KoleSlider v-model=\"volume\" :min=\"0\" :max=\"100\" show-input />\n</template>\n\n<script>\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n  name: 'SliderVolumeDemo',\n  components: { KoleSlider },\n  data() {\n    return { volume: 30 };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleSlider } from 'kole-ui/react';\n\nexport default function VolumeSlider(): JSX.Element {\n  const [volume, setVolume] = useState<number>(30);\n  return (\n    <KoleSlider min={0} max={100} value={volume} showInput onChange={setVolume} />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleSlider v-model=\"volume\" :min=\"0\" :max=\"100\" show-input />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst volume = ref<number>(30);\n</script>",
    "vue2ts": "<template>\n\n  <KoleSlider v-model=\"volume\" :min=\"0\" :max=\"100\" show-input />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n  name: 'SliderVolumeDemo',\n  components: { KoleSlider },\n  data(): Record<string, unknown> {\n    return { volume: 30 };\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Slider.html:28 标记（data-min=0 / data-max=100 / data-value=30 / data-input）与 :49-56 脚本实参，data-input → showInput 数值联动"
  },
  {
   "id": "slider-ex-2",
   "title": "带刻度",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-slider data-step=\"10\" data-ticks data-value=\"50\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      4
     ],
     [
      0,
      5
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本按可见尺寸测量布局"
   ],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-step=\"10\" data-value=\"50\"></div>",
    "jsx": "import { KoleSlider } from 'kole-ui/react';\n\n<KoleSlider min={0} max={100} step={10} value={50} showTicks />",
    "vue3": "<template>\n  <KoleSlider :model-value=\"50\" :min=\"0\" :max=\"100\" :step=\"10\" show-ticks />\n</template>\n\n<script setup>\nimport { KoleSlider } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleSlider :value=\"50\" :min=\"0\" :max=\"100\" :step=\"10\" show-ticks />\n</template>\n\n<script>\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n  name: 'SliderTicksDemo',\n  components: { KoleSlider }\n};\n</script>",
    "tsx": "import { KoleSlider } from 'kole-ui/react';\n\nexport default function KoleSliderDemo(): JSX.Element {\n  return (\n    <KoleSlider min={0} max={100} step={10} value={50} showTicks />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleSlider :model-value=\"50\" :min=\"0\" :max=\"100\" :step=\"10\" show-ticks />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('带刻度');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleSlider :value=\"50\" :min=\"0\" :max=\"100\" :step=\"10\" show-ticks />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n  name: 'SliderTicksDemo',\n  components: { KoleSlider },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Slider.html:34 标记（data-step=10 / data-value=50 / data-ticks）与 :50-52 脚本实参，data-ticks → showTicks 刻度"
  },
  {
   "id": "slider-ex-3",
   "title": "双滑块范围",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-range data-slider data-value=\"20,60\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      4
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      5
     ],
     [
      0,
      4,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本按可见尺寸测量布局"
   ],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-slider\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-range data-value=\"20,60\"></div>",
    "jsx": "import { useState } from 'react';\nimport { KoleSlider } from 'kole-ui/react';\n\nexport default function PriceRangeSlider() {\n  const [price, setPrice] = useState([20, 60]);\n  return (\n    <KoleSlider range min={0} max={100} value={price} onChange={setPrice} />\n  );\n}",
    "vue3": "<template>\n  <KoleSlider v-model=\"price\" range :min=\"0\" :max=\"100\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst price = ref([20, 60]);\n</script>",
    "vue2": "<template>\n  <KoleSlider v-model=\"price\" range :min=\"0\" :max=\"100\" />\n</template>\n\n<script>\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n  name: 'SliderRangeDemo',\n  components: { KoleSlider },\n  data() {\n    return { price: [20, 60] };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleSlider } from 'kole-ui/react';\n\nexport default function PriceRangeSlider(): JSX.Element {\n  const [price, setPrice] = useState([20, 60]);\n  return (\n    <KoleSlider range min={0} max={100} value={price} onChange={setPrice} />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleSlider v-model=\"price\" range :min=\"0\" :max=\"100\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('双滑块范围');\nconst price = ref([20, 60]);\n</script>",
    "vue2ts": "<template>\n\n  <KoleSlider v-model=\"price\" range :min=\"0\" :max=\"100\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n  name: 'SliderRangeDemo',\n  components: { KoleSlider },\n  data(): Record<string, unknown> {\n    return { price: [20, 60] };\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Slider.html:39 标记（data-range / data-value=\"20,60\"）与 :54-56 脚本实参，data-range → range 双滑块，value 为 [20, 60]"
  },
  {
   "id": "slider-ex-4",
   "title": "禁用",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"kole-slider is-disabled\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-slider data-value=\"40\"></div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      5
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3
     ],
     [
      0,
      4
     ],
     [
      0,
      5,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": false,
   "previewUnsafeReasons": [
    "演示脚本按可见尺寸测量布局"
   ],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-slider is-disabled\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" data-max=\"100\" data-min=\"0\" data-value=\"40\"></div>",
    "jsx": "import { KoleSlider } from 'kole-ui/react';\n\n<KoleSlider min={0} max={100} value={40} disabled />",
    "vue3": "<template>\n  <KoleSlider :model-value=\"40\" :min=\"0\" :max=\"100\" disabled />\n</template>\n\n<script setup>\nimport { KoleSlider } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <KoleSlider :value=\"40\" :min=\"0\" :max=\"100\" disabled />\n</template>\n\n<script>\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n  name: 'SliderDisabledDemo',\n  components: { KoleSlider }\n};\n</script>",
    "tsx": "import { KoleSlider } from 'kole-ui/react';\n\nexport default function KoleSliderDemo(): JSX.Element {\n  return (\n    <KoleSlider min={0} max={100} value={40} disabled />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleSlider :model-value=\"40\" :min=\"0\" :max=\"100\" disabled />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleSlider } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('禁用');\n\n</script>",
    "vue2ts": "<template>\n\n  <KoleSlider :value=\"40\" :min=\"0\" :max=\"100\" disabled />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleSlider } from 'kole-ui/vue2';\n\nexport default {\n  name: 'SliderDisabledDemo',\n  components: { KoleSlider },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": "依据 frameworks/Slider.html:44 标记（is-disabled / data-value=40，data-min=0 / data-max=100）与 Slider.jsx:20 disabled prop"
  }
 ],
 "curated": true
}