bootstarp滑块条

最新推荐文章于 2024-03-22 09:51:16 发布

濤啊

最新推荐文章于 2024-03-22 09:51:16 发布

阅读量1.4k

点赞数

文章标签： bootstrap 前端 html

原文链接：https://seiyria.com/bootstrap-slider/

版权

git下载地址:GitHub - seiyria/bootstrap-slider: A slider control for Bootstrap 3 & 4.

bootstrap-slider例子地址：Slider for Bootstrap Examples Page

下载bootstrap-slider 组件,在.html引入

css:<link rel="stylesheet" href="../css/assets/bootstrap-slider.min.css">

script:<script src="../js/assets/bootstrap-slider.min.js"></script>

jq:<script src="../js/assets/jquery.js"></script>

案例:

<!DOCTYPE html>

<head>
    <link rel="stylesheet" href="../css/assets/bootstrap-slider.min.css">
    <style>
        .center2 {
            margin-top: 20px;
            margin-left: 20px;
        }
    </style>
</head>

<body>
    <div class="center2">
        ￥:<span id="left"></span><span> - </span>￥:<span id="right"></span><br />
        <input id="ex16b" type="text" /><br />
    </div>
</body>
<script src="../js/assets/jquery.js"></script>
<script src="../js/assets/bootstrap-slider.min.js"></script>
<script>
    $("#ex16b").slider({ min: 0, max: 10, value: [0, 10], focus: true });
    $("#ex16b").on("slide", function (slideEvt) {
        $("#left").text((slideEvt.value)[0]);
        $("#right").text((slideEvt.value)[1]);
    });
</script>

</html>