adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
2 lines (1 loc) • 3.46 kB
CSS
.adui-slider-wrapper{position:relative;display:flex;align-items:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.adui-slider{flex:1;list-style:none;position:relative;margin-left:5px;margin-right:5px;padding:4px 0;height:12px;cursor:pointer}.adui-slider-active .adui-slider-rail{background-color:var(--gray-500)}.adui-slider-active .adui-slider-handle{transform:scale(1.2);box-shadow:0 0 0 6px rgba(0,0,0,.05),0 0 0 1px rgba(0,0,0,.1),0 2px 2px 0 rgba(0,0,0,.1)}.adui-slider-hasMarks{padding-bottom:12px}.adui-slider-rail{position:absolute;width:100%;height:4px;background-color:var(--gray-300);border-radius:2px;transition:background-color var(--motion-duration-slow)}.adui-slider-track{position:absolute;height:4px;background-color:var(--primary-color);border-radius:4px;transition:background-color var(--motion-duration-slow) var(--ease-in-out)}.adui-slider-handle{position:absolute;margin-top:-4px;cursor:pointer;width:12px;height:12px;background-color:#fff;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 2px 2px 0 rgba(0,0,0,.1);transition:border-color var(--motion-duration-slow),transform var(--motion-duration-slow) cubic-bezier(0.18, 0.89, 0.32, 1.28),box-shadow var(--motion-duration-fast) ease}.adui-slider-handle:hover{transform:scale(1.2)}.adui-slider-handle:focus{outline:none}.adui-slider-handle.ant-tooltip-open{border-color:#1890ff}.adui-slider:hover .adui-slider-rail{background-color:var(--gray-500)}.adui-slider:hover .adui-slider-handle:not(.ant-tooltip-open){border-color:#69c0ff}.adui-slider-step{position:absolute;width:100%;height:4px;background:rgba(0,0,0,0)}.adui-slider-mark-text{position:absolute;top:14px;font-size:13px;line-height:20px;text-align:center;color:#1f1f1f;word-break:keep-all;cursor:pointer}.adui-slider-disabled{cursor:not-allowed}.adui-slider-disabled .adui-slider-mark-text,.adui-slider-disabled .adui-slider-handle{cursor:not-allowed}.adui-slider-range-tooltip-wrapper{position:absolute;inset:0 5px;opacity:0;visibility:hidden;transition:all var(--adui-motion-duration-base) var(--adui-motion-ease-base)}.adui-slider-range-tooltip-wrapper.adui-slider-range-tooltip-wrapper-visible{opacity:1;visibility:visible}.adui-slider-range-tooltip-wrapper.adui-slider-range-tooltip-wrapper-combined .adui-slider-range-tooltip{color:rgba(0,0,0,0)}.adui-slider-range-tooltip-wrapper.adui-slider-range-tooltip-wrapper-combined .adui-slider-range-tooltip-left{border-radius:6px 0 0 6px}.adui-slider-range-tooltip-wrapper.adui-slider-range-tooltip-wrapper-combined .adui-slider-range-tooltip-right{border-radius:0 6px 6px 0}.adui-slider-range-tooltip-wrapper.adui-slider-range-tooltip-wrapper-combined .adui-slider-range-tooltip-combined{opacity:1;visibility:visible}.adui-slider-range-tooltip-wrapper.adui-slider-range-tooltip-wrapper-overlapped .adui-slider-range-tooltip-left{opacity:0;visibility:hidden}.adui-slider-range-tooltip{position:absolute;bottom:36px;padding:10px 12px;font-size:13px;color:#fff;background-color:#393939;border-radius:6px;transform:translate3d(-50%, 0, 0)}.adui-slider-range-tooltip::before{content:"";position:absolute;bottom:-5px;left:50%;margin-left:-5px;width:0;height:0;border-width:5px 5px 0;border-color:rgba(0,0,0,0);border-top-color:#393939;border-style:solid}.adui-slider-range-tooltip-combined{position:absolute;bottom:36px;display:flex;padding:10px 0;align-items:center;justify-content:center;white-space:nowrap;color:#fff;opacity:0;visibility:hidden}