{"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":"demo-mapped","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 { KoleSlider } from 'kole-ui/react';\n\n<>\n<KoleSlider max=\"100\" min=\"0\" value=\"30\" role=\"slider\" tabIndex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</>","vue3":"import { KoleSlider } from 'kole-ui/vue3';\n\n<template>\n<KoleSlider :max=\"100\" :min=\"0\" :value=\"30\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</template>","vue2":"import { KoleSlider } from 'kole-ui/vue2';\n\n<template>\n<KoleSlider :max=\"100\" :min=\"0\" :value=\"30\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</template>"},"notes":[]},{"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":"demo-mapped","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<>\n<KoleSlider max=\"100\" min=\"0\" step=\"10\" value=\"50\" role=\"slider\" tabIndex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</>","vue3":"import { KoleSlider } from 'kole-ui/vue3';\n\n<template>\n<KoleSlider :max=\"100\" :min=\"0\" :step=\"10\" :value=\"50\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</template>","vue2":"import { KoleSlider } from 'kole-ui/vue2';\n\n<template>\n<KoleSlider :max=\"100\" :min=\"0\" :step=\"10\" :value=\"50\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</template>"},"notes":[]},{"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":"demo-mapped","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 { KoleSlider } from 'kole-ui/react';\n\n<>\n<KoleSlider max=\"100\" min=\"0\" range value=\"20,60\" role=\"slider\" tabIndex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</>","vue3":"import { KoleSlider } from 'kole-ui/vue3';\n\n<template>\n<KoleSlider :max=\"100\" :min=\"0\" range value=\"20,60\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</template>","vue2":"import { KoleSlider } from 'kole-ui/vue2';\n\n<template>\n<KoleSlider :max=\"100\" :min=\"0\" range value=\"20,60\" role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</template>"},"notes":[]},{"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":"demo-mapped","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<>\n<KoleSlider max=\"100\" min=\"0\" value=\"40\" disabled role=\"slider\" tabIndex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</>","vue3":"import { KoleSlider } from 'kole-ui/vue3';\n\n<template>\n<KoleSlider :max=\"100\" :min=\"0\" :value=\"40\" disabled role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</template>","vue2":"import { KoleSlider } from 'kole-ui/vue2';\n\n<template>\n<KoleSlider :max=\"100\" :min=\"0\" :value=\"40\" disabled role=\"slider\" tabindex=\"0\" aria-valuemax=\"100\" aria-valuemin=\"0\" />\n</template>"},"notes":[]}]}