com.phloxui/styles/lib/theme/material/component/dataview/input/MaterialSlider.less

PhloxUI Ng2+ Framework

material-slider {
    .material-slider {
        .mat-accent .mat-slider-thumb, .mat-accent .mat-slider-thumb-label, .mat-accent .mat-slider-track-fill {
            background-color: @CLR_BRAND;
        }

        .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
            border-color: rgba(0, 0, 0, @MATERIAL_SLIDER_POINT_BORDER_ALPHA);
        }

        .cdk-keyboard-focused .mat-slider-focus-ring, .cdk-program-focused .mat-slider-focus-ring {
            background-color: @CLR_BRAND;
            transform: scale(1);
            opacity: 0.3;
        }
    }

    .help {
        width: 100%;
        padding-top: @MATERIAL_DROPDOWN_HELP_PADDING;
    }

    &.warning {
        .mat-slider-ticks {
            border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_WARNING;
        }
    } 
    
    &.error {
        .mat-slider-ticks {
            border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_ERROR;
        }
    }
    
    &.success {
        .mat-slider-ticks {
            border-color: @MATERIAL_FORM_CONTROL_FONT_COLOR_SUCCESS;
        }
    }
}