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;
}
and the CSS advice. I was convinced that there couldn't be anything wrong with the background images. 