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

/* SHOW VALUE IN SLIDER HANDLE */
jQuery(".cm-slider").on("slide", function(event, ui) {
  sliderValue = ui.value;
  jQuery(this).find(".ui-slider-handle").text(sliderValue);
});
	

3. Add the following code to the '+ CSS' field
   1. See article: Adding JavaScript and/or CSS to a Question

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

4. Make sure to test

Please Note

• This works best in 'V2 Themes'