Question Styling: Slider

This article will show you how to format/style items within this specific question type


See the article following article if you have not added JavaScript and/or CSS to a question


Add a Custom Image Header:

In addition to using text, you can upload a scale image to add to the top of the scale. To do so:

  1. Upload the scale image to the FILE UPLOAD section (click here to review the 'Uploading Images' section)
  2. In the 'Add Start Point', paste the image link (under the Full Text editor - Code View) and make sure to change the width to 100%, example below:
    <img src="PASTE IMAGE LINK HERE" style="width: 100%;">
  3. Then add the following code into the 'ADD CSS' field 

    TABLE.cm-sliders-table {
    		table-layout: fixed;
    		max-width: 1000px;
    		margin: 0 auto;
    	}
    	TD.cm-sliders-header-row__empty-cell,
    	TD.cm-sliders-group-row__text-cell,
    	TD.cm-slider-value-row__empty-cell,
    	TD.cm-slider-row__label-cell {
    		max-width: 200px;
    	}
    	TD.cm-sliders-group-row__empty-cell,
    	TD.cm-slider-row__slider-cell,
    	TD.cm-slider-value-row__value-cell,
    	TD.cm-sliders-header-row__start-point-cell,
    	TD.cm-sliders-header-row__middle-point-cell,
    	TD.cm-sliders-header-row__end-point-cell {
    		width: auto;
    		max-width: 800px;
    	}
    	TD.cm-slider-row__slider-cell .cm-slider {
    		margin: 0 8.5% 0 7.5%;
    	}
    	TD.cm-slider-row__label-cell img {
    		width: 100%;
    	}
    	.cm-hover {
    		position: fixed;
    		z-index: 100;
    		top: 0;
    		right: 0;
    		width: 100%;
    		max-width: 800px;
    		height: auto;
    	}
    	.cm-hover img {
    		max-width: 100%;
    		height: auto;
    	}
    
    
           TD.cm-sliders-header-row__start-point-cell {
    		text-align: left;
    		width: 100% !important;
    	}
    	
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