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 3 years 5 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.

slider_bg.png


cross.png


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,

slider_at_0.png


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

slider_at_50.png


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.

slider_at_100.png



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.

Re: slider handle center does not align with background image of slider 3 years 5 months ago #59423

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4190
  • Thank you received: 787
  • Karma: 359
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: 3 years 5 months ago by tpartner. Reason: Can't type today!
The administrator has disabled public write access.
The following user(s) said Thank You: Tiepies

Re: slider handle center does not align with background image of slider 3 years 5 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.155 seconds
Donation Image