.lh-slider{
    .lh-slider-runway {
        width: 100%;
        height: 4px;
        margin: 16px 0;
        background-color: @color_b6;
        border-radius: 3px;
        position: relative;
        cursor: pointer;
        vertical-align: middle;
    }
    .lh-slider-bar {
        height: 4px;
        //width: 0;
        left: 0;
        background-color: @color_theme6;
        border-top-left-radius: 3px;
        border-bottom-left-radius: 3px;
        position: absolute;
        z-index: 10;
    }
    .lh-slider-button {
        height: 36px;
        width: 36px;
        position: absolute;
        z-index: 1001;
        top: -16px;
        transform: translateX(-50%);
        background-color: transparent;
        text-align: center;
        &-wrapper {
            display: inline-block;
            width: 12px;
            height: 12px;
            border: 2px solid @color_theme6;
            background-color: #fff;
            border-radius: 50%;
            transition: .2s;
            user-select: none;
            margin-top: 33.3%;
            &:hover {
                cursor: grab;
                cursor: -moz-grab;
                cursor: -webkit-grab;
            }
        }

        //&:hover {
        //    height: 58px;
        //    top: -38px;
        //    .lh-slider-button-wrapper {
        //        cursor: grab;
        //        cursor: -moz-grab;
        //        cursor: -webkit-grab;
        //    }
        //    .lh-slider-tooltip {
        //        display: inline-block;
        //    }
        //    .grabbing {
        //        cursor: grabbing;
        //        cursor: -moz-grabbing;
        //        cursor: -webkit-grabbing;
        //    }
        //}
        &:active {
            height: 50px;
            top: -38px;
            .lh-slider-tooltip {
                display: inline-block;
            }
        }

    }
    //关闭提示框
    .lh-slider-untooltip {
        height: 36px;
        top: -16px;
        &:hover {
            height: 36px;
            top: -16px;
        }
        &:active {
            height: 36px;
            top: -16px;
        }
    }
    //提示框
    .lh-slider-tooltip {
        display: none;
        background-color:@color_b1;
        color: #fff;
        padding: 3px 5px;
        border-radius: 3px;
        &::after {
            content: "";
            width: 0;
            height: 0;
            border: 5px solid;
            border-color: @color_b0 transparent transparent transparent;
            position: absolute;
            left: calc(~"50% - 5px");
            left: -moz-calc(~"50% - 5px");
            left: -webkit-calc(~"50% - 5px");
            top: 21px;
        }
    }
    //禁用
    .lh-slider-disabled {
        cursor: not-allowed;
        .lh-slider-bar {
            background-color: @color_b4;
        }
        .lh-slider-button {
            &:hover {
                cursor: not-allowed;
                .lh-slider-button-wrapper {
                    cursor: not-allowed;
                    transform: none;
                    &:hover {
                        cursor: not-allowed;
                        transform: none;
                    }
                }
                .lh-slider-tooltip {
                    &:hover {
                        cursor: not-allowed;
                        transform: none;
                    }
                }
            }
            .lh-slider-button-wrapper {
                border-color: @color_b4;
                &:hover {
                    cursor: not-allowed;
                    transform: none;
                }
                &:active {
                    cursor: not-allowed;
                    transform: none;
                }
            }
        }
    }
    //间断点
    .lh-slider-stop {
        position: absolute;
        height: 6px;
        width: 6px;
        border-radius: 100%;
        background-color: #fff;
        transform: translateX(-50%);
        top: auto;
        .lh-slider-marks {
            position: absolute;
            top: 15px;
            transform: translateX(-50%);
            color: @color_b3;
        }
    }
    &.is-vertical {
        .lh-slider-runway {
            width: 6px;
            margin: 0 16px;
            height: 100%;
        }
        .lh-slider-bar {
            width: 6px;
            height: 0;
            bottom: 0;
        }
        .lh-slider-button {
            top: auto;
            bottom: -16px;
            left: 3px;
            transform: translate(-50%,50%);
            &:hover {
                height: auto;
                top: auto;
                transform: translate(-50%,27%);
            }
            &:active {
                height: auto;
                top: auto;
                transform: translate(-50%,27%);
            }
        }
        .lh-slider-stop {
            transform: translateY(50%);
            .lh-slider-marks {
                transform: translateY(-35%);
                top: 0;
                left: 18px;
            }
        }
    }
}