myprint-design/css/styles/my-slider.css

操作简单，组件丰富的一站式打印解决方案打印设计器

.m-slider{display:inline-block;height:4px;position:relative;z-index:9;touch-action:none}.m-slider .u-slider-rail{position:absolute;z-index:99;height:4px;width:100%;background-color:#f5f5f5;border-radius:2px;cursor:pointer;transition:background-color .3s}.m-slider .u-slider-track{position:absolute;z-index:99;background:rgba(73,149,255,.5411764706);border-radius:4px;height:4px;cursor:pointer;transition:background .3s;pointer-events:none}.m-slider .trackTransition{transition:left .2s,width .2s,background .3s}.m-slider:hover .u-slider-rail{background:#e3e3e3}.m-slider:hover .u-slider-track{background:#1677ff}.m-slider .m-slider-handle{position:absolute;z-index:999;width:14px;height:14px;top:50%;background:#fff;border:2px solid rgba(73,149,255,.54);border-radius:50%;cursor:pointer;outline:0;transition:width .3s,height .3s,border-color .3s,border-width .3s,transform .3s cubic-bezier(.18,.89,.32,1.28)}.m-slider .m-slider-handle .m-handle-tooltip{position:relative;display:inline-block;padding:6px 8px;font-size:14px;color:#fff;line-height:20px;text-align:center;min-width:32px;border-radius:6px;transform:translate(-50%,-50%) scale(.8);top:-32px;left:50%;background:rgba(0,0,0,.85);box-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;outline:0;opacity:0;transition:transform .25s cubic-bezier(.78,.14,.15,.86),opacity .25s cubic-bezier(.78,.14,.15,.86)}.m-slider .m-slider-handle .m-handle-tooltip .m-arrow{position:absolute;z-index:9;left:50%;bottom:0;transform:translateX(-50%) translateY(100%) rotate(180deg);display:block;pointer-events:none;width:16px;height:16px;overflow:hidden}.m-slider .m-slider-handle .m-handle-tooltip .m-arrow::before{position:absolute;bottom:0;inset-inline-start:0;width:16px;height:8px;background-color:rgba(0,0,0,.85);clip-path:path("M 0 8 A 4 4 0 0 0 2.82842712474619 6.82842712474619 L 6.585786437626905 3.0710678118654755 A 2 2 0 0 1 9.414213562373096 3.0710678118654755 L 13.17157287525381 6.82842712474619 A 4 4 0 0 0 16 8 Z");content:""}.m-slider .m-slider-handle .m-handle-tooltip .m-arrow::after{position:absolute;width:8.9705627485px;height:8.9705627485px;bottom:0;inset-inline:0;margin:auto;border-radius:0 0 2px 0;transform:translateY(50%) rotate(-135deg);box-shadow:3px 3px 7px rgba(0,0,0,.1);z-index:0;background:0 0;content:""}.m-slider .m-slider-handle .show-handle-tooltip{pointer-events:auto;transform:translate(-50%,-50%) scale(1);opacity:1}.m-slider .handleTransition{transition:left .2s}.m-slider-disabled .u-slider-rail{cursor:not-allowed;background:rgba(0,0,0,.06)}.m-slider-disabled .u-slider-track{background:rgba(0,0,0,.25)}.m-slider-disabled .m-slider-handle{border-color:rgba(0,0,0,.25);cursor:not-allowed}.m-slider-disabled .m-slider-handle:hover{width:14px;height:14px;border-width:2px;border-color:rgba(0,0,0,.25)}.m-slider-disabled .m-slider-handle:focus{width:14px;height:14px;border-width:2px;border-color:rgba(0,0,0,.25)}.m-slider-disabled:hover .u-slider-rail{background:rgba(0,0,0,.06)}.m-slider-disabled:hover .u-slider-track{background:rgba(0,0,0,.25)}