Slider: Smiley Faces (0-100)

This article will help you program a Smiley Face Slider


Smiley Face Sliders

This code will allow you to convert a 'Slider' question type into a "Smiley Face Slider" exercise. 

Click here to see an example


Instructions - Smiley Face Slider (0-100)

  1. Add a Slider question type to your survey with all of the appropriate responses
    1. See article: Add a Question: Slider
  2. Add the code below to your 'ADD JAVASCRIPT'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      var imagesArray = ["https://cdn2.cmix.com/surveyContent/survey_1144/uploads/20.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/19.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/18.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/17.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/16.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/15.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/14.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/13.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/12.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/11.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/10.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/9.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/8.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/7.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/6.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/5.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/4.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/3.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/2.gif", "https://cdn2.cmix.com/surveyContent/survey_1144/uploads/1.gif"];
      jQuery(".cm-slider").on("slide", function(event, ui) {
      	var tempImage;
      	switch (true) {
      	    case ui.value >= 0 && ui.value <= 5:
      	        tempImage = imagesArray[0];
      	        break;
      	    case ui.value >= 5 && ui.value <= 10:
      	        tempImage = imagesArray[1];
      	        break;
      	    case ui.value >= 10 && ui.value <= 15:
      	        tempImage = imagesArray[2];
      	        break;
      	    case ui.value >= 15 && ui.value <= 20:
      	        tempImage = imagesArray[3];
      	        break;
      	    case ui.value >= 20 && ui.value <= 25:
      	        tempImage = imagesArray[4];
      	        break;
      	    case ui.value >= 25 && ui.value <= 30:
      	        tempImage = imagesArray[5];
      	        break;
      	    case ui.value >= 30 && ui.value <= 35:
      	        tempImage = imagesArray[6];
      	        break;
      	    case ui.value >= 35 && ui.value <= 40:
      	        tempImage = imagesArray[7];
      	        break;
      	    case ui.value >= 40 && ui.value <= 45:
      	        tempImage = imagesArray[8];
      	        break;
      	    case ui.value >= 45 && ui.value <= 50:
      	        tempImage = imagesArray[9];
      	        break;
      	    case ui.value >= 50 && ui.value <= 55:
      	        tempImage = imagesArray[10];
      	        break;
      	    case ui.value >= 55 && ui.value <= 60:
      	        tempImage = imagesArray[11];
      	        break;
      	    case ui.value >= 60 && ui.value <= 65:
      	        tempImage = imagesArray[12];
      	        break;
      	    case ui.value >= 65 && ui.value <= 70:
      	        tempImage = imagesArray[13];
      	        break;
      	    case ui.value >= 70 && ui.value <= 75:
      	        tempImage = imagesArray[14];
      	        break;
      	    case ui.value >= 75 && ui.value <= 80:
      	        tempImage = imagesArray[15];
      	        break;
      	    case ui.value >= 80 && ui.value <= 85:
      	        tempImage = imagesArray[16];
      	        break;
      	    case ui.value >= 85 && ui.value <= 90:
      	        tempImage = imagesArray[17];
      	        break;
      	    case ui.value >= 90 && ui.value <= 95:
      	        tempImage = imagesArray[18];
      	        break;
      	    case ui.value >= 95 && ui.value <= 100:
      	        tempImage = imagesArray[19];
      	        break;
      	    default:
      	        tempImage = imagesArray[10];
      	}
      	imageToUse = 'url(' + tempImage + ') no-repeat center';
      	jQuery(this).find(".ui-slider-handle").css({
      	    background: imageToUse,
      	    "background-size": "2em"
      	});
      });
      		
  3. Add the code below to your 'ADD CSS'. 
    1. See article: Adding JavaScript and/or CSS to a Question
      .cm-slider {
        height: 8px;
      }
      
      
      .cm-slider .ui-slider-handle,
      .cm-slider:not(.ui-slider-disabled) .ui-slider-handle:hover {
        top: -16px;
        width: 36px;
        height: 36px;
        background-color: #f0f0f0 !important;
        background: url("https://cdn2.cmix.com/surveyContent/survey_1144/uploads/11.gif") center center no-repeat;
        background-size: 36px 36px !important;
        cursor: pointer;
      }
      		
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