Community Learn Tools Library Leisure
search
English
javascript - Please recommend a jquery slider plug-in, the function is very simple
某草草
某草草 2017-05-19 10:35:24
0
4
735

I need such a slider plug-in. It is very simple, but I have been searching for a long time on the Internet and cannot find a suitable one. Please recommend one. You can rely on jquery, but do not rely on jquery ui and other libraries

某草草
某草草

reply all(4)
左手右手慢动作
左手右手慢动作2017-05-19 10:37:24 4 floor

I took some time and wrote one. I don’t know if it conforms to the rules. Portal: https://jsfiddle.net/0u17c6r0/

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .ranger {
            width: 200px;
            height: 10px;
            border-radius: 5px;
            background: lightgrey;
            position: relative;
            margin: 100px auto;
        }
        .dot {
            width: 20px;
            height: 20px;
            position: absolute;
            left: 0;
            top:-5px;
            background: #227dc5;
            border-radius: 10px;
            cursor: pointer;
        }
        .tip {
            position: absolute;
            width: 60px;
            height: 25px;
            text-align: center;
            line-height: 25px;
            left: -20px;
            top: -30px;
            background: #227dc5;
            color: white;
        }
        .tip:before{
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            border: 5px transparent solid;
            border-top-color: #227dc5;
            left: 25px;
            top: 25px;
        }
    </style>
</head>
<body>
    <p class="ranger">
        <p class="dot">
            <p class="tip">0%</p>
        </p>
    </p>
    <script type="text/javascript">
        var dot = document.querySelector('.dot'),
            tip = document.querySelector('.tip'),
            startX = 0,
            dotX = 0;
        
        dot.addEventListener('mousedown', mouseDown);
        document.addEventListener('mouseup', mouseUp);

        function mouseDown(e) {
            startX = e.clientX;
            dotX = dot.offsetLeft;
            document.addEventListener('mousemove', mouseMove);
        }

        function mouseUp() {
            document.removeEventListener('mousemove', mouseMove);
        }

        function mouseMove(e) {
            var left = Math.min(Math.max(dotX+(e.clientX - startX), 0), 180),
                percentage = parseInt(left/1.8)+'%';
            tip.innerText = percentage;
            dot.style.left = Math.min(Math.max(dotX+(e.clientX - startX), 0), 180)+'px';
        }
    </script>
</body>
</html>
Like +0
Add Reply
滿天的星座
滿天的星座2017-05-19 10:37:24 3 floor

bootstrap-slider

You can use this, I’ve used it and it’s fine.

Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-05-19 10:37:24 2 floor

Just input range.
If you want to consider compatibility, you can try nouislider (https://refreshless.com/nouis...

Like +0
Add Reply
漂亮男人
漂亮男人2017-05-19 10:37:24 1 floor

Such a simple requirement, and I couldn’t find it after searching for a long time, so why not write one myself?

The reach-out party is really rampant and stepped on me directly.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template