Welcome, Guest
Username: Password: Remember me

TOPIC: slider handle center does not align with background image of slider

slider handle center does not align with background image of slider 4 years 2 months ago #59416

  • Tiepies
  • Tiepies's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
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;
}
The administrator has disabled public write access.

slider handle center does not align with background image of slider 4 years 2 months ago #59423

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 4963
  • Thank you received: 1021
  • Karma: 424
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;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
Last Edit: 4 years 2 months ago by tpartner. Reason: Can't type today!
The administrator has disabled public write access.
The following user(s) said Thank You: Tiepies

slider handle center does not align with background image of slider 4 years 2 months ago #59427

  • Tiepies
  • Tiepies's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 3
  • Karma: 0
Thanks for the sharp eye :) and the CSS advice. I was convinced that there couldn't be anything wrong with the background images.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.162 seconds