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>
  <meta charset=utf-8 />
  <title>JS Bin</title>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
​
​
</head>
<body>
  <div class="container">
        <div class="mid"></div>
        <div class="band" id="drag"></div>
    </div>
    <div id="slider"></div>
</body>
</html>
 
html, body { padding: 0; margin: 0; }
​
    .container {
        height: 52px;
        width: 100%;
        max-width: 500px;
        overflow: hidden;
        position: relative;
        margin-bottom: 80px;
        margin-top: 30px;
        overflow: hidden;
    }
    
        .band {
            position: relative;
            background:  url('http://s14.directupload.net/images/130405/7uqfryb3.png') no-repeat -3px 0;
            width: 2562px;
            height: 52px;
            cursor: w-resize;
            left: 50%;
            margin-left: -1284px;
        }
        
        .mid {
            position: absolute;
            background: url('http://s14.directupload.net/images/130405/bc3jqbh3.png') no-repeat center center;
            height: 52px;
            width: 3px;
            left: 50%;
            z-index: 1000;
        }
 
$(document).ready(function(){
  var def = 140;
    var xpos_curr = $('.container').width() / 2;
    var xpos;
    $( "#drag" ).draggable({
        grid: [ 14,14 ], 
        axis: "x",
        drag: function(event, ui) {
            
            /*xpos = ui.position.left;
            if(xpos > xpos_curr) {
                def = def - 1;
                
            }
            if(xpos < xpos_curr) {
                def = def + 1;
            }
            xpos_curr = xpos;*/
            
            $('#slider').slider({
                min: 60,
                max: 200,
                range: "min",
                value: 140,
                step: 1
            });
            console.log($( "#slider" ).slider( "value" ));
            
            //$('#value').text(def);
            
        }
    });
});
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers