Script: Sliders - Show Value In Slider Handle

This article will show you how to program a slider with slider values within the Slider Handle 


Background

You may have the need to have a Slider question display the Slider Values in the Slider handle itself. This can sometimes be used to aid in clarity for respondents when using these types of exercises. 

Below is an example: 


Instructions

  1. Program your 'Slider' question
    1. See article: Advanced Question: Slider
  2. Add the following code to the '+ Javascript' field
    1. See article: Adding JavaScript and/or CSS to a Question
  3. /* SHOW VALUE IN SLIDER HANDLE */
    jQuery(".cm-slider").on("slide", function(event, ui) {
      sliderValue = ui.value;
      jQuery(this).find(".ui-slider-handle").text(sliderValue);
    });
    	
  4. Add the following code to the '+ CSS' field
    1. See article: Adding JavaScript and/or CSS to a Question
  5. /* SHOW VALUE IN SLIDER HANDLE */
    .cm-slider .ui-slider-handle {
        transition: none;
    }
    
    .cm-slider .ui-slider-handle {
      display: table;
      color: white;
      line-height: 2.25em;
      text-align: center;
    }
    
    .cm-slider-row__label-cell {
      padding-left: 2em;
      padding-right: 2em;
    }
    	
  6. Make sure to test

Please Note

  • This works best in 'V2 Themes'
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