Check out the LimeSurvey source code on GitHub!

slider handle center does not align with background image of slider

5 years 10 months ago #59416 by Tiepies
I'm currently creating a survey that contains Visual Analogue Scale (VAS) slider questions, using suggestions from another thread . I'm using custom background and slider handle images.

The scale I use has 101 units (0-100), and on the background image both the end points and the center are indicated.

I expected the center of the slider handle to align with the end points when it is put on 0 or 100, and with the center of the scale when it is put on 50. While the slider handle center seems to be well aligned at the 0 end of the scale,

at 50 it does not align with the center point of the image,

and it seems the slider track extends one 'unit' beyond the background image to the right
allowing the slider handle to end at 101 (off-scale) instead of 100.

Whatever I do, it seems that the background image always comes slightly short of the slider track. I don't know anything about JQuery and only very little about CSS so I have no idea how to solve this. However, for my purposes it's pretty important that I do. Can anybody help me out here?

This what I added to the template.css file to achieve what I have so far:
/*Custom VAS slider questions*/
/*Don't show slider handle until it get's clicked on, to make slider question
more like VAS questions */
.numeric-multi div.multinum-slider {
  width: auto;
  float: left;
  margin-top: 1.5em;
  margin-bottom: 0.2em;
/*set widget size to accommodate background image*/
.ui-slider-1 {
  width: 382px;
  height: 23px;
  margin-bottom: 0px;
  background-color: none;
/*customize background image for slider*/
.multinum-slider .ui-widget-content {
	background-image: url(slider_bg.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-color: white;
	border: none;
.ui-slider .ui-slider-handle {
	height: 50px;
	width: 50px;
	background: url(cross.png);
 	margin-left: -25px;
	top: -15px;
/*	background: #79B7E7 none;*/
	border: 0 none;

Please Log in to join the conversation.

5 years 10 months ago - 5 years 10 months ago #59423 by tpartner
I think the problem may be with your background images. Your CSS has the slider handle exactly centered on the right edge of the .ui-slider-1 div when at 100 which is correct.

If you give the .ui-slider-1 div some background colour, you will see some space to the right of its background bars.

Also, get rid od the moz-border stuff:
.multinum-slider .ui-widget-content {
	-moz-border-radius: 0;

Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 5 years 10 months ago by tpartner. Reason: Can't type today!
The following user(s) said Thank You: Tiepies

Please Log in to join the conversation.

5 years 10 months ago #59427 by Tiepies
Thanks for the sharp eye :) and the CSS advice. I was convinced that there couldn't be anything wrong with the background images.

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form