Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
​
  <style type="text/css">
  
  .demo {
     width: 800px;
     margin: 50px auto 0 auto;
  }
​
​
​
  .ui-slider-horizontal  {
    background: #DFEFFC none repeat scroll 0 0;
  }
​
  .ui-slider .ui-slider-handle {
    background-image:url(http://img207.imageshack.us/img207/7760/sliderhandle.png);
    cursor:default;
    height:15px;
    position: absolute;
    width:27px;
    z-index:2;   
    margin-left: -1px;
    margin-top: 3px;
  }
  
  .ui-slider 
  {
    position:relative;
    text-align:left;
  }
  
​
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#slider").slider({
    slide: function( event, ui ) {      
            
            //normalise handle position between 0 and 1 relative to slider width
            var range = $("#slider").width();//width of slider
            var normalised = $("#slider1handle").position().left / range;
            
            //normalise between desired range: 0:HandleWidth
            var range2 = $("#slider1handle").width();
            normalised = (normalised*range2) + 1;      
      
            var marginAmount = -1*normalised;
            $("#slider1handle").css("margin-left", marginAmount);      
        }
      
    });
    $('a.ui-slider-handle').attr('id', "slider1handle");
    
    
​
  });
  </script>
</head>
<body>
<div class="demo">
  <div id="slider"></div>
</div>
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers