`

bootstrap-slider

bootstrap 
阅读更多
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bootstrap slider</title>
<link rel="stylesheet" href="../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<script src="../assets/js/jquery-2.1.4.min.js"></script>
<script src="../bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstrap-3.3.7/plugin/css/bootstrap-slider.css" />
<script src="../bootstrap-3.3.7/plugin/bootstrap-slider.js"></script>

<script type="text/javascript">
function do_classify() {
var mySlider = document.getElementById("ex8");
console.log(mySlider.value);
}
</script>
</head>
<body>

<div class="container">
   <div class="row" >
      <div class="col-xs-6"  style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
         <input type="text" id="ex8"
data-slider-id='ex1Slider'
data-provide="slider"
data-slider-min="0"
data-slider-max="20"
data-slider-step="1"
data-slider-value="14"
οnchange="do_classify()"
/>

<script >
$("#ex8").on("change", function(event){
console.log("Changed to ", event.value.newValue);
});
</script>

      </div>
</div>
</div>
</body>
</html>
分享到：
| bootstrap图标icon
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics