bootstrap-slider là một thư viện JavaScript mạnh mẽ cho phép tạo các thanh trượt (slider) tương tác trên trang web. Trong bài viết này, tôi sẽ hướng dẫn bạn cách tích hợp và sử dụng plugin này để giải quyết một bài toán cụ thể: hiển thị khoảng giá trị đã chọn vào ô input theo thời gian thực.

Địa chỉ ví dụ trực tiếp: https://seiyria.com/bootstrap-slider/

Kho lưu trữ GitHub: https://github.com/seiyria/bootstrap-slider

Mục tiêu cần đạt được:

Chúng ta cần xây dựng chức năng cho phép người dùng kéo thanh trượt để chọn khoảng giá trị (ví dụ: độ tuổi từ X đến Y), sau đó hiển thị giá trị đã chọn vào ô textbox ngay lập tức.

Giải pháp thực hiện:

Bước 1 - Hiển thị dropdown khi click vào ô input

Vì dự án đã sử dụng Bootstrap nên tôi tận dụng luong component dropdown có sẵn. Cấu trúc HTML như sau:

<div class="form-group btn-group">
   <div class="input-icon right dropdown-toggle" data-toggle="dropdown">
       <i class="fa fa-angle-down font-blue"></i>
       <input type="text" class="form-control input-small" 
              placeholder="Vui lòng chọn khoảng tuổi" id="giaTriTuoi">
   </div>
    <div class="dropdown-menu dropdown-content" role="menu">
            <input id="sliderTuoi" type="text" data-stopPropagation="true"
                   data-slider-min="0"
                   data-slider-max="50"
                   data-slider-step="0.5"
                   data-slider-value="[2,5]"
                   data-slider-tooltip="hide"/>
    </div>
</div>

Các thuộc tính data-slider-XXX là các tùy chỉnh mà bootstrap-slider cung cấp. Chi tiết về các thuộc tính này có trong tài liệu chính thức trên GitHub.

Bước 2 - Khởi tạo plugin thanh trượt

var sliderTuoi = $("#sliderTuoi").bootstrapSlider();

Lưu ý: Nếu dự án không sử dụng Bootstrap làm nền tảng, cách khởi tạo sẽ khác:

// Trường hợp có sử dụng jQuery
var sliderTuoi = $("#sliderTuoi").slider({});

// Trường hợp không sử dụng jQuery
var sliderTuoi = new Slider('#sliderTuoi', {});

Bước 3 - Cập nhật giá trị vào ô input theo thời gian thực

Để bắt sự kiện khi giá trị thanh trượt thay đổi, plugin cung cấp sự kiện change. Để lấy giá trị hiện tại, chúng ta sử dụng phương thức getValue.

Code xử lý như sau:

var capNhatGiaTri = function() {
    var mangTuoi = sliderTuoi.bootstrapSlider('getValue');
    $('#giaTriTuoi').val(mangTuoi[0] + ' tuổi ~ ' + mangTuoi[1] + ' tuổi');
};

var sliderTuoi = $("#sliderTuoi").bootstrapSlider().on('change', capNhatGiaTri);

Như vậy là chức năng cơ bản đã hoàn thành.

-------Phần tiếp theo: Các vấn đề gặp phải và cách khắc phục-------

Vấn đề 1: Dropdown ẩn mỗi khi kết thúc thao tác kéo

Khi người dùng kéo thanh trượt xong, menu dropdown tự động đóng lại, gây khó khăn trong việc lựa chọn liên tục.

Cách giải quyết: Ngăn chặn sự kiện đóng menu khi click vào vùng dropdown:

$('.dropdown-menu').click(function(sự Kiện) {
    sự Kiện.stopPropagation();
});

Giải pháp này được tham khảo từ: Keep Bootstrap dropdown open on click

Vấn đề 2: Lỗi "getValue is not a function"

Ban đầu tôi sử dụng cú pháp getValue() theo ví dụ mặc định:

Nhưng khi chạy thực tế, browser báo lỗi. Sau khi đọc kỹ tài liệu API, tôi phát hiện cú pháp đúng cần phải truyền tham số vào phương thức bootstrapSlider() trước khi gọi getValue.

Và đó là tất cả những gì cần chia sẻ!

Code hoàn chỉnh cuối cùng: