Tạo thanh trượt slider dễ dàng với noUiSlider

Plugin này giúp chúng ta có thể tạo ra các thanh trượt giá trị giữa một khoảng nào đó, rất phổ biến trong thực tế như chọn giá trong 1 khoảng tiền, chọn số lượng ...

Link plugin: https://refreshless.com/nouislider/
Link github: https://github.com/leongersen/noUiSlider/releases

Sau khi tải về chúng ta cần tìm đến 2 file quan trọng là nouislider.css và nouislider.js, nếu có file min thì các bạn ưu tiên sử dụng cho nhẹ.

Code file index.html như sau:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="noUiSlider-14.0.2/distribute/nouislider.min.css" />
    <style type="text/css">
        .container {width: 1000px;margin: 50px auto;}
        .text-center {text-align: center;}
    </style>
</head>
<body>
    <div class="container">
        <h1 class="text-center">jQuery Plugins noUiSlider</h1>
        <br>
        <br>
        <div id="slider"></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="noUiSlider-14.0.2/distribute/nouislider.min.js"></script>
    <script type="text/javascript">
        $(function(){
            var slider = document.getElementById('slider');
            noUiSlider.create(slider, {
                start: [20, 80],
                connect: true,
                range: {
                    'min': 0,
                    'max': 100
                }
            });
        });
    </script>
</body>
</html>

Giải thích một số option


// khoảng giá trị từ điểm đầu => điểm cuối
range: { 
    'min': 1,
    'max': 100
},

// mỗi lần di chuyển 5 đơn vị
step: 5, 

// hiển thị thanh màu giữa các nút cầm
connect: true, 

// hiển thị giá trị ở nút cầm, cần thêm wNumb.js => lấy 2 số sau phẩy
tooltips: wNumb({ decimals: 2 }), 

// điểm bắt đầu của các nút, có 2 điểm thì điền 2 giá trị
start: [4, 69], 

// lấy giá trị của slider, lưu ý là dạng string 
console.log(slider.noUiSlider.get());

// dùng để drag đoạn connect giữa 2 nút
behaviour: 'drag',

Tải toàn bộ demo tại https://ufile.io/7u23qbb2