Skip to content

Instantly share code, notes, and snippets.

@dzwarg

dzwarg/gist:2352056

Created April 10, 2012 15:13
Show Gist options
  • Save dzwarg/2352056 to your computer and use it in GitHub Desktop.
Save dzwarg/2352056 to your computer and use it in GitHub Desktop.
Download ZIP
noUiSlider toggle offset bug
Raw
gistfile1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>noUiSlider layout bug.</title>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="nouislider.css"/>
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script type="text/javascript" src="jquery.nouislider.js"></script>
<script type="text/javascript">
$(function(){
$('.btn').button().click(function(evt){
$(this).next().show();
});
$('.sliderbar').noUiSlider('init',{
scale:[0,2400],
startMin:0,
startMax:2400,
change: function(){
$('#min').text($('.sliderbar').noUiSlider('getValue')[0]);
$('#max').text($('.sliderbar').noUiSlider('getValue')[1]);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span3">
<button class="btn">Button</button>
<div style="display:none;">
noUiSlider label
<div class="sliderbar"></div>
<span id="min"></span> to <span id="max"></span>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment