devextreme/less/sources/widgets/common/slider.less

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (widgets/common/slider.less)
* Version: 20.1.4
* Build date: Tue Jun 02 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
@SLIDER_TOOLTIP_CONTENT_HEIGHT: 28px;
@SLIDER_TOOLTIP_ARROW_HEIGHT: 7px;

.dx-slider-label {
    position: absolute;
    font-size: 0.85em;

    &:last-child {
        right: 0;
        left: auto;
    }

    .dx-rtl &:last-child {
        left: 0;
        right: auto;
    }
}

.dx-slider-label-position-bottom {
    padding-bottom: 14px;

    .dx-slider-label {
        bottom: -8px;
    }
}

.dx-slider-label-position-top {
    padding-top: 14px;

    .dx-slider-label {
        top: -8px;
    }
}

.dx-slider {
    line-height: 0;

    &:before {
        display: inline-block;
        height: 100%;
        content: '';
        vertical-align: middle;
    }

    .dx-overlay-content {
        height: @SLIDER_TOOLTIP_CONTENT_HEIGHT;

        &:before {
            display: none;
        }
    }

    .user-select(none);
    .dx-popover-arrow-size(2 * @SLIDER_TOOLTIP_ARROW_HEIGHT);
}

.dx-slider-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    cursor: pointer;
}

.dx-slider-bar {
    position: relative;
}

.dx-slider-range {
    position: absolute;
    top: 0;
    height: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
}

.dx-slider-handle {
    position: absolute;
    top: 0;
    right: 0;
    pointer-events: auto;
    -webkit-user-drag: none;

    .dx-tooltip-wrapper .dx-popup-content {
        line-height: 0;
    }
}

.dx-state-disabled {
    .dx-slider-wrapper {
        cursor: default;
    }
}

.dx-rtl .dx-slider-handle {
    right: auto;
    left: 0;
}

.dx-slider-tooltip-on-hover {
    .dx-tooltip {
        visibility: hidden;
    }

    &.dx-state-active,
    &.dx-state-hover {
        .dx-tooltip {
            visibility: visible;
        }
    }
}