How To Get Bootstrap-Slider Working
I had no problem working with bootstrap-slider
(http://www.eyecon.ro/bootstrap-slider/) work using the simplest example
provided on that site. However, I was intending to use one in a bootstrap
popover as part of a more extended set of settings. The simplest example I
could think of is here:
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/slider.css">
<script src="js/vendor/jquery-1.9.1.js"></script>
<script src="js/vendor/less-1.4.1.min.js"></script>
<script src="js/vendor/bootstrap.js"></script>
<script src="js/vendor/bootstrap-slider.js"></script>
<script>
$(function () {
$('#rangeSlider').slider({
formater: function(value) {
return 'Current value: '+value;
tooltip: 'show';
}
});
$("#popoverbutton").popover({
html: true,
placement: 'bottom',
title: 'Options',
content: function(){
return
$("#popover-content").html();
}});
});
</script>
</head>
<body>
<h4> This is a test! </h4>
<div class="row">
<a href="#" id="popoverbutton" class="btn btn-inverse"
rel="popover"><i class="icon-cog icon-white"></i></a>
</div>
<div id="popover-content" class="hide">
<div class="well"> Range: <input type="text" class="span2"
value="50"id="rangeSlider" data-slider-min="10"
data-slider-max="100" data-slider-step="5"
data-slider-value="50">
</div>
</div>
</body>
</html>
As you can see, if you try to load this, it doesn't work. The slider is
rendered correctly, but cannot be interacted with, no tooltip appears,
etc.
A diff between the generated html for the slider component inside and
outside of a popup reveals them to be identical, so I fail to understand
the holdup. Anyone have experience with this particular issue?
No comments:
Post a Comment