Script: Slider With More Than 3 Headers

This article will show you how to use more than 3 headers in a slider


Background

By default, 'Slider' questions have 3 header fields. These are tied to the far left, middle and far right. In some cases you may need more than 3 headers so you need to add some custom code. 


Instructions

  1. Program your ;Slider' question
  2. In the 'Source Code Editor' of the 'Footnote' field, add the code below. 
    • See article: Source Code Editor
    • Replace the 'UPDATE_SLIDER' in the code below with the question number
    • <script id="slider-multiple-headers" type="text/javascript" src="//cdn.cmix.com/surveyContent/thirdparty/custom-functionality/multiple-labels-on-top-v1.2.js?questions=UPDATE_SLIDER"></script>
      		
  3. Add the following code to the '+ CSS' field
    • See article: Adding JavaScript and/or CSS to a Question
    • Towards the bottom of this code, update the percentage using the following as a base:
      • 4 headers = 75%
      • 5 headers = 80%
      • 6 headers = 85%
        .cm-sliders-header-row__empty-cell {
          width: 0 !important;
        }
        .cm-sliders-header-row__middle-point-cell {
          width: 80% !important; 
        }
        .cm-slider__value-label {
          height: 1.3em;
          font-size: 0.85em;
          overflow: visible;
        }
        .cm-slider__value-label--top.cm-slider__value-label {
          margin-bottom: 0.2em;
        }
        .cm-slider__value-label--bottom.cm-slider__value-label {
          margin-top: 0.2em;
        }
        .cm-slider__value-label--top.cm-slider__value-label--last {
          margin-bottom: 1.2em;
        }
        .cm-slider__value-label--bottom.cm-slider__value-label--last {
          margin-top: 1.2em;
        }
        .cm-slider__pointer-label {
          margin-left: -0.5em;
          white-space: nowrap;
          color: #75BC1E;
          font-weight: bold;
        }
        .cm-slider__value-label--top .cm-slider__pointer-bar {
          width: 1em;
          border-left: 1px solid #aaa;
          border-top: 1px solid #aaa;
        }
        .cm-slider__value-label--bottom .cm-slider__pointer-bar {
          width: 1em;
          border-left: 1px solid #aaa;
          border-bottom: 1px solid #aaa;
        }
        .cm-slider__value-label--bottom .cm-slider__pointer-bar {
        }
        .cm-slider-row .cm-slider-row__slider-cell {
          padding: 0.8em 0;
        }
        .cm-slider-row .cm-slider-row__label-cell {
          padding-top: 0;
          vertical-align: top;
        }
        
        
        	.cm-slider {
        		width: 75%; /* UPDATE THIS PERCENTAGE WHEN YOU CHANGE THE NUMBER OF HEADERS */
        		margin: 0 auto;
        	}
        	
        	.cm-slider-value {
        		font-size: 1.3em;
        		font-weight: bold;
        		overflow: visible;
        	}
        			
  4. In the 'Start Point' field, add your headers delimited with a pipe (|). It should look something like this:
    • Excellent|Very Good|Good|Fair

NOTE: 

  • This script is optimized for 'V2 Themes'. It will not work for 'V1 Themes'.
  • This is optimized to be a single slider with no response list
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us