Forums

ANeuby

Hi,

i have the following problem. I playing with the jquery ui slider control, but the problem is, that if I am dragging the slider i have a small 1px point at the left top of the slider bar.

Hope somebody can help me.

Here is my code, you only need to copy&paste it in an file. I replaced the symbols of + and - and the bar with colors and so on...


<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\"
\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">

<html xmlns=\"http://www.w3.org/1999/xhtml\">

	<head>
	<title>jquery slider test</title>
	<style type=\"text/css\">
	
	body {
	background: #fa8e64;
	}
	
	#wrapper {
		width: 600px;
		height: 600px;
		margin: 0px auto;
		padding: 50px;
	}
	
	.slider_bar {
     background: #000000;  
     height: 9px;  
     width: 316px;  
     float: left;  
     margin: 0px 5px;  
     position: relative; 
	}
	
	.ui-slider-handle {
     background: #fff;  
     height: 25px;  
     width: 12px;  
     position: absolute;  
     top: -8px;  
	}
	
	.add {
     background: #fff;  
     height: 25px;  
     width: 23px;  
     float: left;  
     position: relative;  
     top: -5px;  
     cursor: pointer;
	}
	.minus {
    background: #fff;  
     height: 9px;  
     width: 25px;  
     overflow: hidden;  
     float: left;  
     cursor: pointer; 
	}
	
	.groups{
     position: absolute;  
     height: 25px;  
     top: 170px;  
     left: 165px;  
	}
	
	</style>
	
	<script src=\"http://code.jquery.com/jquery-latest.js\"></script>
	<script type=\"text/javascript\" src=\"http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js\"></script>
	<script type=\"text/javascript\" src=\"http://dev.jquery.com/view/tags/ui/latest/ui/ui.slider.js\"></script>
	
	<script type=\"text/javascript\">
	$(document).ready(function(){
		$('.slider_bar').slider(
				{
				handle: '.ui-slider-handle',
				startValue: 26,
				minValue: 0,
				maxValue: 100
				});
	});
	</script>
	
	</head>
	
	<body>
	
	<div id=\"wrapper\">
	

	
	
	 <div class=\"groups\">  
     <div class=\"minus\"></div>  
     <div class=\"slider_bar\">  
       <div id=\"slider_caption\"></div>  
       <div id=\"slider1_handle\" class=\"ui-slider-handle\"></div>  
     </div>  
     <div class=\"add\"></div>  
   </div>
	
	
	</div>
	
	</body>


</html>

Thanks!

bye,
ANeuby

ANeuby

Okay, i'd found a solution.

You need to download the jquery ui package and change the src in the html file. I don't know why but only if you use a link to the js at jquery.com you get this small pixel line.

Hope somebody can explain me why ?

Thanks.

bye,
ANeuby

futureknight

Maybe this tutorial can help you: http://css-tricks.com/videos/css-tricks-video-20.php

treehouse : what would you like to learn today?

Forums

jquery - 1px point at sliderbar