vexip-ui/css/slider.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-slider-vars{--vxp-slider-track-bg-color:var(--vxp-fill-color-humble);--vxp-slider-track-bg-color-hover:var(--vxp-fill-color-hover);--vxp-slider-track-bg-color-disabled:var(--vxp-slider-track-bg-color);--vxp-slider-track-height:4px;--vxp-slider-filler-bg-color:var(--vxp-color-primary-opacity-2);--vxp-slider-filler-bg-color-hover:var(--vxp-color-primary-base);--vxp-slider-filler-bg-color-disabled:var(--vxp-fill-color-disabled);--vxp-slider-handler-size:16px;--vxp-slider-handler-bg-color:var(--vxp-color-white);--vxp-slider-handler-b-width:2px;--vxp-slider-handler-b-color:var(--vxp-color-primary-base);--vxp-slider-handler-b-color-disabled:var(--vxp-fill-color-disabled);--vxp-slider-handler-s-color:var(--vxp-color-primary-light-6);--vxp-slider-handler-shadow:unset;--vxp-slider-handler-shadow-hover:unset;--vxp-slider-handler-shadow-focus:0 0 4px 1px var(--vxp-slider-handler-s-color);--vxp-slider-handler-shadow-disabled:unset;--vxp-slider-handler-scale-hover:1.25;--vxp-slider-handler-scale-focus:1.25;--vxp-slider-marker-size:8px;--vxp-slider-marker-pad:32px}.vxp-slider{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;width:100%;cursor:pointer}.vxp-slider,.vxp-slider *,.vxp-slider ::after,.vxp-slider ::before{box-sizing:border-box}.vxp-slider--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-slider--vertical{display:inline-flex;width:auto;height:100%}.vxp-slider--with-marker{margin-bottom:var(--vxp-slider-marker-pad)}.vxp-slider--flip-marker{margin-top:var(--vxp-slider-marker-pad);margin-bottom:0}.vxp-slider--vertical.vxp-slider--with-marker{margin-inline-end:var(--vxp-slider-marker-pad);margin-bottom:0}.vxp-slider--vertical.vxp-slider--flip-marker{margin-inline:var(--vxp-slider-marker-pad) 0;margin-top:0;margin-bottom:0}.vxp-slider--loading{cursor:auto}.vxp-slider--disabled{cursor:not-allowed}.vxp-slider__container{position:relative;display:flex;flex-direction:column;width:calc(100% - var(--vxp-slider-handler-size) - 2px);padding:max(0,(var(--vxp-slider-handler-size) - var(--vxp-slider-track-height)) * .5) 0;margin:0 calc(var(--vxp-slider-handler-size) * .5 + 1px);cursor:pointer}.vxp-slider--vertical .vxp-slider__container{flex-direction:row;width:auto;height:calc(100% - var(--vxp-slider-handler-size) - 2px);padding:0 max(0,(var(--vxp-slider-handler-size) - var(--vxp-slider-track-height)) * .5);margin:calc(var(--vxp-slider-handler-size) * .5 + 1px) 0}.vxp-slider--disabled .vxp-slider__container{cursor:not-allowed}.vxp-slider__track{display:flex;align-items:flex-start;width:100%;height:var(--vxp-slider-track-height);overflow:hidden;background-color:var(--vxp-slider-track-bg-color);border-radius:var(--vxp-slider-track-height);transition:var(--vxp-transition-background)}.vxp-slider--sliding .vxp-slider__track,.vxp-slider:hover .vxp-slider__track{background-color:var(--vxp-slider-track-bg-color-hover)}.vxp-slider--vertical .vxp-slider__track{width:var(--vxp-slider-track-height);height:100%}.vxp-slider--reverse .vxp-slider__track{align-items:flex-end;justify-content:flex-end}.vxp-slider--disabled .vxp-slider__track,.vxp-slider--disabled.vxp-slider--sliding .vxp-slider__track,.vxp-slider--disabled:hover .vxp-slider__track{background-color:var(--vxp-slider-track-bg-color-disabled)}.vxp-slider__filler{position:absolute;top:0;bottom:0;width:100%;padding:max(0,(var(--vxp-slider-handler-size) - var(--vxp-slider-track-height)) * .5) 0;overflow:hidden;border-radius:var(--vxp-slider-track-height)}.vxp-slider__filler-inner{width:100%;height:100%;background-color:var(--vxp-slider-filler-bg-color);border-radius:var(--vxp-slider-track-height);transition:var(--vxp-transition-background)}.vxp-slider--vertical .vxp-slider__filler{inset-inline:0;top:auto;bottom:auto;width:auto;height:100%;padding:0 max(0,(var(--vxp-slider-handler-size) - var(--vxp-slider-track-height)) * .5)}.vxp-slider--range-draggable .vxp-slider__filler{cursor:ew-resize}.vxp-slider--vertical.vxp-slider--range-draggable .vxp-slider__filler{cursor:ns-resize}.vxp-slider--sliding .vxp-slider__filler-inner,.vxp-slider:hover .vxp-slider__filler-inner{background-color:var(--vxp-slider-filler-bg-color-hover)}.vxp-slider--disabled .vxp-slider__filler-inner,.vxp-slider--disabled.vxp-slider--sliding .vxp-slider__filler-inner,.vxp-slider--disabled:hover .vxp-slider__filler-inner{background-color:var(--vxp-slider-filler-bg-color-disabled)}.vxp-slider__trigger{position:absolute;display:flex;align-items:center;justify-content:center;width:var(--vxp-slider-handler-size);height:var(--vxp-slider-handler-size);transition:var(--vxp-transition-opacity)}.vxp-slider__trigger .vxp-tooltip{line-height:1;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-slider__trigger .vxp-tooltip,.vxp-slider__trigger .vxp-tooltip__trigger{width:100%;height:100%}.vxp-slider--hide-trigger .vxp-slider__trigger{opacity:0}.vxp-slider__handler{position:relative;width:var(--vxp-slider-handler-size);height:var(--vxp-slider-handler-size);cursor:pointer;background-color:var(--vxp-slider-handler-bg-color);border:var(--vxp-slider-handler-b-width) solid var(--vxp-slider-handler-b-color);border-radius:var(--vxp-slider-handler-size);outline:0;box-shadow:var(--vxp-slider-handler-shadow);transition:var(--vxp-transition-border),var(--vxp-transition-shadow),var(--vxp-transition-transform)}.vxp-slider__handler::before{position:absolute;top:-4px;left:-4px;width:calc(100% + 8px);height:calc(100% + 8px);clip-path:inset(0 0 50% 50%);pointer-events:none;content:"";border:var(--vxp-border-shape) var(--vxp-slider-handler-b-color);border-radius:50%;transition:var(--vxp-transition-border),var(--vxp-transition-opacity);transform-origin:50% 50%;animation:vxp-border-round 2s infinite linear}.vxp-slider__handler::before{inset-inline-start:2px;top:2px;width:calc(100% - 4px);height:calc(100% - 4px);opacity:0}.vxp-slider--hide-trigger .vxp-slider__handler{transform:scale(0)}.vxp-slider__button{display:flex;align-items:center;justify-content:center;outline:0;transition:var(--vxp-transition-transform)}.vxp-slider__button:hover{transform:scale(var(--vxp-slider-handler-scale-hover))}.vxp-slider__button:hover .vxp-slider__handler{box-shadow:var(--vxp-slider-handler-shadow-hover)}.vxp-slider__button--sliding,.vxp-slider__button:focus{transform:scale(var(--vxp-slider-handler-scale-focus))}.vxp-slider__button--sliding .vxp-slider__handler,.vxp-slider__button:focus .vxp-slider__handler{box-shadow:var(--vxp-slider-handler-shadow-focus)}.vxp-slider__button--loading .vxp-slider__handler::before{opacity:100%}.vxp-slider--disabled .vxp-slider__button .vxp-slider__handler{cursor:not-allowed;border-color:var(--vxp-slider-handler-b-color-disabled)}.vxp-slider--disabled .vxp-slider__button,.vxp-slider--disabled .vxp-slider__button:hover{transform:scale(1)}.vxp-slider--disabled .vxp-slider__button .vxp-slider__handler,.vxp-slider--disabled .vxp-slider__button:hover .vxp-slider__handler{box-shadow:var(--vxp-slider-handler-shadow-disabled)}.vxp-slider--disabled.vxp-slider--sliding .vxp-slider__button .vxp-slider__handler{box-shadow:var(--vxp-slider-handler-shadow-disabled)}.vxp-slider__tip{min-width:auto;min-height:auto;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-slider__point{position:absolute;display:flex;pointer-events:none}.vxp-slider__dot{width:var(--vxp-slider-marker-size);height:var(--vxp-slider-marker-size);background-color:var(--vxp-slider-handler-bg-color);border:var(--vxp-slider-handler-b-width) solid var(--vxp-slider-handler-b-color-disabled);border-radius:var(--vxp-slider-marker-size);transition:var(--vxp-transition-border)}.vxp-slider__point--in-range .vxp-slider__dot{border-color:var(--vxp-slider-handler-b-color)}.vxp-slider--disabled .vxp-slider__point .vxp-slider__dot{border-color:var(--vxp-slider-handler-b-color-disabled)}.vxp-slider__markers{position:absolute;top:calc(var(--vxp-slider-handler-size) + 6px);width:100%}.vxp-slider--flip-marker .vxp-slider__markers{top:auto;bottom:calc(var(--vxp-slider-handler-size) + 6px)}.vxp-slider--vertical .vxp-slider__markers{inset-inline-start:calc(var(--vxp-slider-handler-size) + 6px);top:auto;width:auto;height:100%}.vxp-slider--vertical.vxp-slider--flip-marker .vxp-slider__markers{inset-inline:auto calc(var(--vxp-slider-handler-size) + 6px);bottom:auto}.vxp-slider__marker{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none}.vxp-slider--flip-marker .vxp-slider__marker{bottom:0}.vxp-slider--vertical.vxp-slider--flip-marker .vxp-slider__marker{right:0;bottom:auto}.vxp-slider--success{--vxp-slider-filler-bg-color:var(--vxp-color-success-opacity-2);--vxp-slider-filler-bg-color-hover:var(--vxp-color-success-base);--vxp-slider-handler-b-color:var(--vxp-color-success-base);--vxp-slider-handler-s-color:var(--vxp-color-success-light-6)}.vxp-slider--error{--vxp-slider-filler-bg-color:var(--vxp-color-error-opacity-2);--vxp-slider-filler-bg-color-hover:var(--vxp-color-error-base);--vxp-slider-handler-b-color:var(--vxp-color-error-base);--vxp-slider-handler-s-color:var(--vxp-color-error-light-6)}.vxp-slider--warning{--vxp-slider-filler-bg-color:var(--vxp-color-warning-opacity-2);--vxp-slider-filler-bg-color-hover:var(--vxp-color-warning-base);--vxp-slider-handler-b-color:var(--vxp-color-warning-base);--vxp-slider-handler-s-color:var(--vxp-color-warning-light-6)}