[{"attributes":{"bold":true},"insert":"1.非滑块组件："},{"insert":"可自行设置多种样式，可设置滑动条背景颜色渐变、圆角阴影等细节，可改变滑块、滑动条、标记数值的移动速度。\n"},{"attributes":{"width":"397"},"insert":{"image":"R10580997-b6f620f00bedace7e773c3ea656bb95a_20352_547_250.png"}},{"insert":"\n\n若只有滑动条，没有滑块，只需设置滑动条的宽度即可实现对应效果；且背景颜色可设置渐变效果。\n"},{"insert":{"image":"R10580997-903ac0c787a101e50d25d9f49c7c2f15_61180_173_331.png"}},{"insert":" "},{"insert":{"image":"R10580997-79f1134482ecdc5122f4cc5ff218e04e_9983_178_98.png"}},{"insert":"\n滑动条的滑动效果可通过自定义样式实现，设置滑动条的transtion属性为“width 0.5s linear ”，表示滑动条宽度变化时会有过渡效果，时间为0.5s，linear为匀速；修改第二和第三个值即可修改滑动效果。更多过渡效果请自行搜索transition属性。\n"},{"insert":{"image":"R10580997-3445acdc79b04409447a47f87c645f04_13340_265_100.png"}},{"insert":"\n\n数值的滑动：点击滑动条某个位置时，margin-left赋值为当前鼠标x坐标-父容器的距左侧距离。\n"},{"insert":{"image":"R10580997-92ee08a8a69e41f19308d202df798f5f_16125_554_90.png"}},{"insert":"\n\n若有滑块，可用绝对定位容器处理，通过设置“允许拖动”及“拖动边界”实现滑块的拖动。\n"},{"insert":{"image":"R10580997-40adbe121387a389ba483c67a51e6018_12789_180_149.png"}},{"insert":" "},{"insert":{"image":"R10580997-d8d2b52ffd9b4a0f77352fe419f1a3e1_18841_247_133.png"}},{"insert":"\n滑动条的宽度及数值的x坐标与滑块的x坐标绑定，实现滑动条和数值随着滑块的移动而移动。\n\n"},{"attributes":{"bold":true},"insert":"2.滑块组件："},{"insert":"封装好的组件，可直接使用；样式大致为以下两种。\n"},{"attributes":{"width":"363"},"insert":{"image":"R10580997-24416f2cc7e836f33be16be47166761a_5672_417_132.png"}},{"insert":"\n滑块的样式可通过下图的属性进行设置：可设置圆钮半径为0，使圆钮不显示。滑动条的宽高、颜色可以改变，但颜色无法设置渐变效果，且滑动条圆角及阴影等细节也无法修改。\n"},{"insert":{"image":"R10580997-e7cbd935ba51103c6c8247f560e6e2bf_54170_235_407.png"}},{"insert":"\n"}]
[{"insert":"使用滑块组件和不是用滑块组件的做法和效果，每种下面配说明讲解，样式好看些，颜色要能设置渐变\n"},{"insert":{"image":"R10580997-4d0dedea16ab49881df614a674f76c8f_69784_328_53.png"}},{"insert":"\n"},{"insert":{"image":"R10580997-4f1517841c74c1e0968a75121cd9f412_8550_287_105.png"}},{"insert":"\n"}]
R10580997-50ab8d83ecdf0bbe77d599e89f2c1c35_28712_577_633.png
https://v4pre.h5app.com/play/3gJqc4oy