// 用的是scss预处理样式 // $arrowsSize scss变量 // var(--primary-lighten)用的是全局颜色，可以直接用颜色值代替 // $dark #ligth 为黑夜白天样式，可以不用。 $arrowsSize: 6px; // 三角形 大小 .slider{ width: 100%; .slider-body{ width: 100%; height: 6px; margin: 16px 0; border-radius: 5px; position: relative; cursor: pointer; .slider-section{ height: 6px; background-color: var(--primary-lighten); // width: 30%; position: absolute; left: 0; border-radius: 5px; .slider-radius{ height: 16px; width: 16px; position: absolute; left: 100%; z-index: 999; top: -5px; transform: translateX(-50%); background-color: transparent; text-align: center; user-select: none; line-height: normal; .slider-radius-body{ width: 16px; height: 16px; border: 2px solid var(--primary-lighten); background-color: var(--fontwhite-base); border-radius: 50%; transition: .2s; user-select: none; &::after { content: ''; height: 100%; display: inline-block; vertical-align: middle; } } } .slider-percentage{ // display: none; height: 25px; width: 50px; line-height: 25px; border-radius: 5px; background-color: var(--mode-darken); text-align: center; font-size: 14px; color: var(--font-darken); position: absolute; top: -40px; // left: 100%; &::after { content: ''; display: inline-block; vertical-align: middle; width: 0; height: 0; position: absolute; border-top: solid $arrowsSize; border-left: solid $arrowsSize transparent !important; border-right: solid $arrowsSize transparent !important; border-bottom: solid $arrowsSize transparent !important; top: 25px; left: 35%; color: var(--mode-darken); } } } .slider-node{ position: absolute; height: 8px; width: 8px; border-radius: 100%; background-color: var(--fontwhite-base); border: 2px solid var(--primary-lighten); transform: translateX(-50%); top: -1px; } } } #dark .slider-body{ background-color: var(--line-darken3); } #light .slider-body{ background-color: var(--line-lighten3); }
调用
getSlider: function () { return m(slider, { cb : function(arg){ console.log(arg,22222) }, }); }, obj.getSlider(),
说明一下
因为公司项目涉及保密条例，电脑都加了安全限制，无法录制视频或者gif图片，所有只能截图展示了。
效果
可以点击圆点拖动，也可以直接点击灰条进行点选然后拖动，也可以点击灰条上的百分比圆点进行拖动，因为单独又把事件绑定到了body上，所以可以在灰条上拖动开始并且在组件外也可以进行拖动，类似Element UI的slider组件效果。
拖动参数的打印
只为分享写代码过程中的一些心得体会，感谢平台！