Style in Angular Slider

25 Sep 20261 minute to read

The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference.

Customizing the Angular Slider track

Use the following CSS to customize the Angular Slider track.

.e-control-wrapper.e-slider-container.e-horizontal .e-slider-track {
    background: #007bff;
    height: 3px;
}

Customizing the Angular Slider handle

Use the following CSS to customize the slider handle properties.

.e-control-wrapper.e-slider-container .e-slider .e-handle {
    background-color: #f9920b;
    border-radius: 50%;
    border: 0;
}

Customizing the Angular Slider limits

Use the following CSS to customize the slider limits.

.e-control-wrapper.e-slider-container.e-horizontal .e-limits {
    background-color: rgba(69, 100, 233, 0.46);
}

Customizing the Angular Slider ticks

Use the following CSS to customize the slider ticks.

.e-scale .e-tick.e-custom::before {
    content: '\e967';
    position: absolute;
}

Customizing the Angular Slider buttons

Use the following CSS to customize the slider buttons.

.e-control-wrapper.e-slider-container .e-slider-button {
    background: #007bff;
    height: 25px;
    width: 25px;
}