@opentiny/vue-theme/slider/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-slider-container{--tv-Slider-font-size:var(--tv-font-size-default, 14px);--tv-Slider-bg-color:var(--tv-color-bg, #f5f5f5);--tv-Slider-bg-color-disabled:var(--tv-color-bg-disabled, #f0f0f0);--tv-Slider-height:8px;--tv-Slider-line-height:var(--tv-line-height-number, 1.5);--tv-Slider-border-radius:var(--tv-border-radius-sm, 4px);--tv-Slider-range-height:8px;--tv-Slider-range-border-radius:var(--tv-border-radius-sm, 4px);--tv-Slider-range-bg-color:var(--tv-color-bg-active-control, #1476ff);--tv-Slider-range-hover-bg-color:var(--tv-color-bg-active-control, #1476ff);--tv-Slider-range-top:-4px;--tv-Slider-range-disabled-bg-color:var(--tv-color-bg-disabled-control, #c2c2c2);--tv-Slider-handle-width:24px;--tv-Slider-handle-height:24px;--tv-Slider-handle-bg-color:var(--tv-color-bg-inverse, #ffffff);--tv-Slider-handle-bg-color-disabled:var(--tv-color-bg-inverse-disabled, #ffffff);--tv-Slider-handle-border-color:var(--tv-color-border-1, #dbdbdb);--tv-Slider-handle-border-radius:var(--tv-border-radius-round, 999px);--tv-Slider-handle-text-color-hover:var(--tv-color-text-secondary, #595959);--tv-Slider-handle-border-color-hover:var(--tv-color-border-active-control, #1476ff);--tv-Slider-handle-box-shadow:var(--tv-shadow-1-down, 0 1px 4px 0 rgba(0, 0, 0, 0.08));--tv-Slider-input-height:var(--tv-size-height-md, 32px);--tv-Slider-input-width:80px;--tv-Slider-input-border-radius:var(--tv-border-radius-lg, 8px);--tv-Slider-input-border-color:var(--tv-color-border, #c2c2c2);--tv-Slider-input-text-color:var(--tv-color-text, #191919);--tv-Slider-input-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Slider-input-margin-left:var(--tv-space-xl, 16px);--tv-Slider-input-unit-margin-left:var(--tv-space-sm, 4px);--tv-Slider-input-unit-text-color:var(--tv-color-text, #191919);--tv-Slider-input-unit-text-color-disabled:var(--tv-color-text-disabled, #c2c2c2);--tv-Slider-mark-point-bg-color:var(--tv-color-bg-3, #ffffff);--tv-Slider-mark-label-text-color:var(--tv-color-text-weaken, #808080);--tv-Slider-mark-label-font-size:var(--tv-font-size-sm, 12px);--tv-Slider-mark-label-margin-top:var(--tv-space-lg, 12px);--tv-Slider-tips-bg-color:var(--tv-color-bg-2, #ffffff);--tv-Slider-tips-border-radius:var(--tv-border-radius-lg, 8px);--tv-Slider-tips-border-color:var(--tv-Slider-tips-bg-color);--tv-Slider-tips-text-color:var(--tv-color-text, #191919);--tv-Slider-tips-box-shadow:var(--tv-shadow-2-down, 0 2px 12px 0 rgba(0, 0, 0, 0.16));position:relative}.tiny-slider-container.tiny-slider-container__horizontal{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tiny-slider{border-radius:var(--tv-Slider-border-radius);height:var(--tv-Slider-height);position:relative;margin:13px 0;background:var(--tv-Slider-bg-color);cursor:pointer;display:inline-block;line-height:var(--tv-Slider-line-height)}.tiny-slider:not(.tiny-slider__vertical){min-width:160px;-webkit-box-flex:1;-ms-flex:1;flex:1}.tiny-slider.show-auto-width{width:100%}.tiny-slider:hover .tiny-slider__range{background:var(--tv-Slider-range-hover-bg-color)}.tiny-slider.disabled{cursor:default;background-color:var(--tv-Slider-bg-color-disabled)}.tiny-slider.disabled .tiny-slider__range{background-color:var(--tv-Slider-range-disabled-bg-color)}.tiny-slider.disabled .tiny-slider__handle{cursor:not-allowed;background-color:var(--tv-Slider-handle-bg-color-disabled)}.tiny-slider__vertical{width:var(--tv-Slider-height);height:300px;display:block;margin:0 15px}.tiny-slider__vertical+.tiny-slider__input{margin-top:12px;float:none;right:0}.tiny-slider__vertical .tiny-slider__range{border-radius:10px;position:absolute;z-index:1;width:var(--tv-Slider-height)}.tiny-slider__vertical .tiny-slider__up{top:0}.tiny-slider__vertical .tiny-slider__down{bottom:0}.tiny-slider__vertical .tiny-slider__handle{margin:-8px 0 -8px -8px}.tiny-slider__vertical .tiny-slider__mark-point{-webkit-transform:translateY(50%);transform:translateY(50%);height:2px;width:var(--tv-Slider-height)}.tiny-slider__vertical .tiny-slider__mark-label{-webkit-transform:translateY(50%);transform:translateY(50%);margin-left:calc(8px + var(--tv-Slider-height));margin-top:0}.tiny-slider__range{border-radius:var(--tv-Slider-range-border-radius);position:absolute;z-index:1;margin-top:0;height:var(--tv-Slider-range-height);background:var(--tv-Slider-range-bg-color)}.tiny-slider__left{left:0}.tiny-slider__right{right:0}.tiny-slider__handle{border-radius:var(--tv-Slider-handle-border-radius);height:var(--tv-Slider-handle-height);width:var(--tv-Slider-handle-width);position:absolute;margin:-8px -8px 0;z-index:2;outline:0;background:var(--tv-Slider-handle-bg-color);border:1px solid var(--tv-Slider-handle-border-color);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-shadow:var(--tv-Slider-handle-box-shadow);box-shadow:var(--tv-Slider-handle-box-shadow);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:-webkit-grab;cursor:grab;text-align:center}.tiny-slider__handle svg{display:none}.tiny-slider__handle.handle-focus{z-index:10}.tiny-slider:not(.disabled) .tiny-slider__handle:hover{color:var(--tv-Slider-handle-text-color-hover);border-color:var(--tv-Slider-handle-border-color-hover);border-width:2px}.tiny-slider__tips{text-align:center;font-size:var(--tv-Slider-font-size);margin-top:-32px;margin-left:3px;position:absolute;padding:12px 16px;line-height:1.5;z-index:1010;word-break:normal;white-space:nowrap;background:var(--tv-Slider-tips-bg-color);border-radius:var(--tv-Slider-tips-border-radius);color:var(--tv-Slider-tips-text-color);-webkit-box-shadow:var(--tv-Slider-tips-box-shadow);box-shadow:var(--tv-Slider-tips-box-shadow)}.tiny-slider__tips:before{margin-left:-6px;bottom:-8px;content:'';left:50%;top:auto;margin-top:0;position:absolute;width:0;height:0;border-style:solid;border-width:8px 6px 0 6px;border-color:var(--tv-Slider-tips-border-color) transparent}.tiny-slider__tips:after{margin-left:-4px;bottom:-4px;content:'';left:50%;top:auto;margin-top:0;position:absolute;width:0;height:0;border-style:solid;border-width:4px 4px 0 4px;border-color:var(--tv-Slider-tips-border-color) transparent}.tiny-slider__mark-point{position:absolute;pointer-events:none;-webkit-transform:translateX(-50%);transform:translateX(-50%);width:2px;height:var(--tv-Slider-height);background-color:var(--tv-Slider-mark-point-bg-color)}.tiny-slider__mark-label{position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);margin-top:calc(var(--tv-Slider-mark-label-margin-top) + var(--tv-Slider-height));color:var(--tv-Slider-mark-label-text-color);font-size:var(--tv-Slider-mark-label-font-size)}.tiny-slider__input{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:var(--tv-Slider-input-height);vertical-align:top;margin-left:var(--tv-Slider-input-margin-left);font-size:var(--tv-Slider-font-size)}.tiny-slider__input__split{padding:0 4px}.tiny-slider__input input{width:var(--tv-Slider-input-width);height:var(--tv-Slider-input-height);line-height:var(--tv-Slider-input-height);border:1px solid var(--tv-Slider-input-border-color);border-radius:var(--tv-Slider-input-border-radius);color:var(--tv-Slider-input-text-color);background:var(--tv-Slider-input-bg-color);font-size:inherit;padding:0 8px;outline:0;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;text-align:left}.tiny-slider__input__unit{margin-left:var(--tv-Slider-input-unit-margin-left);color:var(--tv-Slider-input-unit-text-color)}.tiny-slider__input.is-disabled .tiny-slider__input__unit{color:var(--tv-Slider-input-unit-text-color-disabled)}