.ui-slider{
    position   : relative;
    text-align : left;
    background : @range-bg;
    border     : 1px solid @range-border-color;

    .ui-slider-handle{
        position   : absolute;
        z-index    : 2;
        width      : @range-size + 4;
        height     : @range-size + 4;
        cursor     : pointer;
        background : @range-handle-bg;
    }

    .ui-slider-range{
        position   : absolute;
        z-index    : 1;
        display    : block;
        border     : 0;
        background : @range-value;

        &.ui-slider-range-min{
            left   : 0;
            bottom : 0;
        }

        &.ui-slider-range-max{
            right : 0;
            top   : 0;
        }
    }

    // For IE8 - See #6727
    &.ui-state-disabled{
        .ui-slider-handle, .ui-slider-range{
            filter : inherit;
        }
    }

    // Alternate slider / range
    //========================================
    &.success when (@range-color-success = true) and (@range-colors = true){
        border-color : @state-success-border;

        .ui-slider-handle{
            background : @state-success-color;
        }

        .ui-slider-range{
            background : @state-success-bg;
        }
    }
    &.warning when (@range-color-warning = true) and (@range-colors = true){
        border-color : @state-warning-border;

        .ui-slider-handle{
            background : @state-warning-color;
        }

        .ui-slider-range{
            background : @state-warning-bg;
        }
    }
    &.error when (@range-color-error = true) and (@range-colors = true){
        background   : @state-error-bg;
        border-color : @state-error-border;

        .ui-slider-handle{
            background : @state-error-color;
        }

        .ui-slider-range{
            background : @state-error-bg;
        }
    }
    &.info when (@range-color-info = true) and (@range-colors = true){
        border-color : @state-info-border;

        .ui-slider-handle{
            background : @state-info-color;
        }

        .ui-slider-range{
            background : @state-info-bg;
        }
    }
}

.ui-slider-horizontal{
    height : @range-size;

    .ui-slider-handle{
        top         : -3px;
        margin-left : -@range-size/2 - 2;
    }

    .ui-slider-range{
        top    : 0;
        height : 100%;
    }
}

.ui-slider-vertical{
    width  : @range-size;
    height : 100px;

    .ui-slider-handle{
        left          : -@range-size/2 - 2;
        margin-left   : 0;
        margin-bottom : -3px;
    }

    .ui-slider-range{
        left  : 0;
        width : 100%;
    }
}