jQuery UI 实例 - 滑块（Slider）实现

最新推荐文章于 2023-08-14 19:10:58 发布

kirsten_z

最新推荐文章于 2023-08-14 19:10:58 发布

阅读量5k

点赞数

分类专栏： jquery 微信开发文章标签： jquery ui

本文链接：https://blog.csdn.net/kirsten_z/article/details/78331233

版权

jquery 同时被 2 个专栏收录

27 篇文章 0 订阅

订阅专栏

微信开发

10 篇文章 0 订阅

订阅专栏

1）说明
实现滑动滑块选择数值
2）示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑块实现</title>
    <meta name="description" content="滑块实现">
    <meta name="keywords" content="滑块实现">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="weui.min.css">
    <style>
        div {
            display: block;
        }
        .riskBlock_list_content{
            -webkit-flex: 1;
            -ms-flex: 1;
            border-left: 1px dashed #f96549;
        }
        .weui-slider-box{
            display: flex;
            -webkit-box-align: center;
            align-items: center;
        }
        .weui-slider {
            padding: 15px 18px;
            user-select: none;
            margin-top: 23px;
        }
        .weui-slider-box .weui-slider {
            -webkit-box-flex: 1;
            flex: 1;
        }
        .weui-slider {
            user-select: none;
        }
        .weui-slider__inner {
            position: relative;
            border: 1px solid #27bdeb;
            height: 4px;
            border-radius: 4px;
            background-color: #fff;
        }
        .weui-slider__track {
            opacity: 0;
        }

        weui.min.css:5
        .weui-slider__track {
            height: 2px;
            background-color: #1aad19;
        }
        .weui-slider__handler {
            position: absolute;
            width: 1px;
            top: 0;
            border-radius: 0px;
            border: none;
            box-shadow: none;
            margin-left: -5px;
            margin-top: 0;
            background-color: transparent;
        }
        .handler {
            background: url(img/slide_bg.png) no-repeat;
            background-size: 29px 42px;
            -webkit-background-size: 29px 42px;
            width: 29px;
            height: 42px;
            top: -33px;
            left: -10px;
            position: absolute;
            color: #27bdeb;
            font-weight: bold;
            font-size: 12px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="riskBlock__list__content">
        <div class="riskBlock__list__content__slider">
            <div class="weui-slider-box" id="slider1">
                <div class="weui-slider">
                    <div id="sliderInner" class="weui-slider__inner">
                        <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
                        <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler">
                            <div class="handler">50</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-3.0.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/jquery-weui.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#slider1').slider(function (per) {
                $('#sliderValue').text(per+'kg');
                $('#slider1 .handler').text(per)
            });
        })
    </script>
</body>
</html>