Use Case 6. The modification of slider colors

Issue

This use case demonstrates how you can apply a color to the Slider value with the assistance of CSS.

Standard slider design:

Custom slider design:

Solution

To obtain a custom design, add the following code at the end of the survey's CSS:

.H24.pluginSlider .sliderUiLo {
    color: green;
    font-size: 20px !important; }

.H24.pluginSlider .sliderUiBetween {
    color: #814098;
    font-size: 20px !important; }

.H24.pluginSlider .sliderUiHi {
    color: red;
    font-size: 20px !important; }

.sliderUiDiv.ui-slider .ui-slider-handle {
border-color: #531f65  !important;
background: #531f65  !important; }

.pluginSlider .ui-slider {
border-color: #d6d6d6;
background: #f7f7f7;
height: 8px; }