CSS Structure in Blazor Range Slider Component

4 Nov 20251 minute to read

The following content outlines the CSS structure that can be used to modify the control’s appearance according to application requirements.

Customizing the slider track

Use the following CSS to customize the slider track.

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

Customizing the 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 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 slider ticks

Use the following CSS to customize the slider ticks.

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

Customizing the 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;
}