.qd-slider{--qd-slider-main-bg-color:var(--qd-color-primary);--qd-slider-runway-bg-color:var(--qd-border-color-light);--qd-slider-stop-bg-color:var(--qd-color-white);--qd-slider-disabled-color:var(--qd-text-color-placeholder);--qd-slider-border-radius:3px;--qd-slider-height:6px;--qd-slider-button-size:20px;--qd-slider-button-wrapper-size:36px;--qd-slider-button-wrapper-offset:-15px}.qd-slider{width:100%;height:32px;display:flex;align-items:center}.qd-slider__runway{flex:1;height:var(--qd-slider-height);background-color:var(--qd-slider-runway-bg-color);border-radius:var(--qd-slider-border-radius);position:relative;cursor:pointer}.qd-slider__runway.show-input{margin-right:30px;width:auto}.qd-slider__runway.is-disabled{cursor:default}.qd-slider__runway.is-disabled .qd-slider__bar{background-color:var(--qd-slider-disabled-color)}.qd-slider__runway.is-disabled .qd-slider__button{border-color:var(--qd-slider-disabled-color)}.qd-slider__runway.is-disabled .qd-slider__button-wrapper.hover,.qd-slider__runway.is-disabled .qd-slider__button-wrapper:hover{cursor:not-allowed}.qd-slider__runway.is-disabled .qd-slider__button-wrapper.dragging{cursor:not-allowed}.qd-slider__runway.is-disabled .qd-slider__button.dragging,.qd-slider__runway.is-disabled .qd-slider__button.hover,.qd-slider__runway.is-disabled .qd-slider__button:hover{transform:scale(1)}.qd-slider__runway.is-disabled .qd-slider__button.hover,.qd-slider__runway.is-disabled .qd-slider__button:hover{cursor:not-allowed}.qd-slider__runway.is-disabled .qd-slider__button.dragging{cursor:not-allowed}.qd-slider__input{flex-shrink:0;width:130px}.qd-slider__bar{height:var(--qd-slider-height);background-color:var(--qd-slider-main-bg-color);border-top-left-radius:var(--qd-slider-border-radius);border-bottom-left-radius:var(--qd-slider-border-radius);position:absolute}.qd-slider__button-wrapper{height:var(--qd-slider-button-wrapper-size);width:var(--qd-slider-button-wrapper-size);position:absolute;z-index:1;top:var(--qd-slider-button-wrapper-offset);transform:translateX(-50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;line-height:normal;outline:0}.qd-slider__button-wrapper::after{display:inline-block;content:"";height:100%;vertical-align:middle}.qd-slider__button-wrapper.hover,.qd-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.qd-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.qd-slider__button{display:inline-block;width:var(--qd-slider-button-size);height:var(--qd-slider-button-size);vertical-align:middle;border:solid 2px var(--qd-slider-main-bg-color);background-color:var(--qd-color-white);border-radius:50%;box-sizing:border-box;transition:var(--qd-transition-duration-fast);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.qd-slider__button.dragging,.qd-slider__button.hover,.qd-slider__button:hover{transform:scale(1.2)}.qd-slider__button.hover,.qd-slider__button:hover{cursor:-webkit-grab;cursor:grab}.qd-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.qd-slider__stop{position:absolute;height:var(--qd-slider-height);width:var(--qd-slider-height);border-radius:var(--qd-border-radius-circle);background-color:var(--qd-slider-stop-bg-color);transform:translateX(-50%)}.qd-slider__marks{top:0;left:12px;width:18px;height:100%}.qd-slider__marks-text{position:absolute;transform:translateX(-50%);font-size:14px;color:var(--qd-text-color-secondary);margin-top:15px}.qd-slider.is-vertical{position:relative;height:100%;flex:0}.qd-slider.is-vertical .qd-slider__runway{width:var(--qd-slider-height);height:100%;margin:0 16px}.qd-slider.is-vertical .qd-slider__bar{width:var(--qd-slider-height);height:auto;border-radius:0 0 3px 3px}.qd-slider.is-vertical .qd-slider__button-wrapper{top:auto;left:var(--qd-slider-button-wrapper-offset);transform:translateY(50%)}.qd-slider.is-vertical .qd-slider__stop{transform:translateY(50%)}.qd-slider.is-vertical .qd-slider__marks-text{margin-top:0;left:15px;transform:translateY(50%)}.qd-slider--large{height:40px}.qd-slider--small{height:24px}