Skip to main content
Skip table of contents

Use Case 6. The modification of slider colors


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:


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




reference to the particular question;


question sequence number;


question custom identifier;

.H24.pluginSlider .sliderUiLo

the lower bound of the slider;

.H24.pluginSlider .sliderUiHi

the upper bound of the slider;

.H24.pluginSlider .sliderUiBetween

the currently selected value;

.sliderUiDiv.ui-slider .ui-slider-handle

slider handler;

.pluginSlider .ui-slider

slider bar;

border-color: #d6d6d6;

border color parameters;

background: #f7f7f7;

background color parameters;

color: green;

text color parameters;

  • These CSS changes are specific for each Survey, they reference the Survey element number which is unique for every Form.

  • If you clone the survey, new sliders will not show the adjustments because their element would have a new reference number which will require a new reference number in the code for the new slider.

  • If you clone the slider question within a Survey you would have to apply a similar code for each slider.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.