Ví dụ cho plugin bootstrap-slider

Bạn đang xem: ví dụ về thanh trượt phạm vi bootstrap

Các ví dụ cho thành phần bootstrap-slider. Hiện tương thích với Bootstrap 4

AdminKit là một ứng dụng thân thiện với nhà phát triển & amp; Mẫu quản trị Bootstrap 5 có thể tùy chỉnh cao với hàng trăm thành phần giao diện người dùng, biểu mẫu, bảng, biểu đồ và biểu tượng.

Ví dụ 1: Quay lại đầu trang

Ví dụ cơ bản với bộ định dạng tùy chỉnh và vùng đã chọn được tô màu qua CSS.

HTML
 
& amp; ltinput id = "ex1" data-slider-id = 'ex1Slider' type = "text" data-slider-min = "0" data-slider-max = "20" data-slider-step = "1" data -slider-value = "14" / & amp; gt
 
JavaScript
 
// Với JQuery
$ ('# ex1'). slider ({
định dạng: function (value) {
return 'Giá trị hiện tại:' + giá trị;
}
});

// Không có JQuery
var slider = new Slider ('# ex1', {
định dạng: function (value) {
return 'Giá trị hiện tại:' + giá trị;
}
});
 
CSS
 
# ex1Slider .slider-selection {
nền: #BABABA;
}
 

Ví dụ 2: Quay lại đầu trang

Bộ chọn phạm vi, các tùy chọn được chỉ định thông qua thuộc tính dữ liệu.

Lọc theo khoảng giá:

€ 10 € 1000

HTML
 
Lọc theo khoảng giá: & amp; ltb & amp; gt € 10 & amp; lt / b & amp; gt & amp; ltinput id = "ex2" type = "text" class = "span2" value = "" data-slider-min = "10" data -slider-max = "1000" data-slider-step = "5" data-slider-value = "[250.450]" / & amp; gt & amp; ltb & amp; gt € 1000 & amp; lt / b & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex2"). slider ({});

// Không có JQuery
var slider = new Slider ('# ex2', {});
 

Ví dụ 3: Quay lại đầu trang

Sử dụng các sự kiện để làm việc với các giá trị và tạo kiểu cho lựa chọn và xử lý thông qua CSS. Chú giải công cụ bị tắt và hình dạng khác nhau cho các tay cầm.

R

G

B

HTML
 
& amp; ltp & amp; gt
& amp; ltb & amp; gtR & amp; lt / b & amp; gt & amp; ltinput type = "text" class = "span2" value = "" data-slider-min = "0" data-slider-max = "255" data-slider- step = "1" data-slider-value = "128" data-slider-id = "RC" id = "R" data-slider-tooltip = "hide" data-slider-handle = "square" / & amp; gt
& amp; lt / p & amp; gt
& amp; ltp & amp; gt
& amp; ltb & amp; gtG & amp; lt / b & amp; gt & amp; ltinput type = "text" class = "span2" value = "" data-slider-min = "0" data-slider-max = "255" data-slider- step = "1" data-slider-value = "128" data-slider-id = "GC" id = "G" data-slider-tooltip = "hide" data-slider-handle = "round" / & amp; gt
& amp; lt / p & amp; gt
& amp; ltp & amp; gt
& amp; ltb & amp; gtB & amp; lt / b & amp; gt & amp; ltinput type = "text" class = "span2" value = "" data-slider-min = "0" data-slider-max = "255" data-slider- step = "1" data-slider-value = "128" data-slider-id = "BC" id = "B" data-slider-tooltip = "hide" data-slider-handle = "tam giác" / & amp; gt
& amp; lt / p & amp; gt
& amp; ltdiv id = "RGB" & amp; gt & amp; lt / div & amp; gt
 
JavaScript
 
var RGBChange = function () {
$ ('# RGB'). Css ('background', 'rgb (' + r.getValue () + ',' + g.getValue () + ',' + b.getValue () + ')')
};

var r = $ ('# R'). slider ()
.on ('slide', RGBChange)
.data ('thanh trượt');
var g = $ ('# G'). slider ()
.on ('slide', RGBChange)
.data ('thanh trượt');
var b = $ ('# B'). slider ()
.on ('slide', RGBChange)
.data ('thanh trượt');
 
CSS
 
#RGB {
chiều cao: 20px;
nền: rgb (128, 128, 128);
}
#RC .slider-selection {
nền: # FF8282;
}
#RC .slider-handle {
nền: đỏ;
}
#GC .slider-selection {
nền: # 428041;
}
#GC .slider-handle {
nền: xanh lá cây;
}
#BC .slider-selection {
nền: # 8283FF;
}
#BC .slider-handle {
viền-dưới-màu: xanh lam;
}
#R, #G, #B {
chiều rộng: 300px;
}
 

Ví dụ 4: Quay lại đầu trang

Thanh trượt dọc với các giá trị được đảo ngược (lớn nhất đến nhỏ nhất).

HTML
 
& amp; ltinput id = "ex4" type = "text" data-slider-min = "- 5" data-slider-max = "20" data-slider-step = "1" data-slider-value = "- 3 "data-slider-direction =" vertical "/ & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex4"). slider ({
đảo ngược: true
});

// Không có JQuery
var slider = new Slider ("# ex4", {
đảo ngược: true
});
 

Ví dụ 5: Quay lại đầu trang

Hủy bản sao của thanh trượt bằng cách gọi phương thức hủy () trên bản sao của thanh trượt qua JavaScript.

HTML

& amp; ltinput id = "ex5" type = "text" data-slider-min = "- 5" data-slider-max = "20" data-slider-step = "1" data-slider-value = "0" / & amp; gt
& amp; ltbutton id = "DestEx5Slider" class = 'btn btn-risk' & gt; Nhấp để Hủy & amp; lt / nút & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex5"). slider ();

// Không có JQuery
var slider = new Slider ('# ex5');

$ ("# DestEx5Slider"). click (function () {

// Với JQuery
$ ("# ex5"). slider ('tiêu diệt');

// Không có JQuery
slider.destroy ();
});
 

Ví dụ 6: Quay lại đầu trang

Có thể liên kết với sự kiện JQuery ‘slide’ trên thanh trượt, sự kiện này được kích hoạt bất cứ khi nào thanh trượt được sử dụng.

Giá trị thanh trượt hiện tại:

3

HTML
 
& amp; ltinput id = "ex6" type = "text" data-slider-min = "- 5" data-slider-max = "20" data-slider-step = "1" data-slider-value = "3" / & amp; gt
& amp; ltspan id = "ex6CurrentSliderValLabel" & gt; Giá trị Thanh trượt Hiện tại: & amp; ltspan id = "ex6SliderVal" & amp; gt3 & amp; lt / span & amp; gt & amp; lt / span & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex6"). slider ();
$ ("# ex6"). on ("slide", function (slideEvt) {
$ ("# ex6SliderVal"). text (slideEvt.value);
});

// Không có JQuery
var slider = new Slider ("# ex6");
slider.on ("slide", function (sliderValue) {
document.getElementById ("ex6SliderVal"). textContent = sliderValue;
});
 

Ví dụ 7: Quay lại đầu trang

Có thể bật và tắt các thanh trượt.

Đã bật

HTML
 
& amp; ltinput id = "ex7" type = "text" data-slider-min = "0" data-slider-max = "20" data-slider-step = "1" data-slider-value = "5" data -slider-enable = "false" / & amp; gt
& amp; ltinput id = "ex7-enable" type = "checkbox" / & amp; gt Đã bật
 
JavaScript
 
// Với JQuery
$ ("# ex7"). slider ();

// Không có JQuery
var slider = new Slider ("# ex7");

$ ("# ex7-enable"). nhấp vào (function () {
if (this.checked) {
// Với JQuery
$ ("# ex7"). slider ("enable");

// Không có JQuery
slider.enable ();
}
khác {
// Với JQuery
$ ("# ex7"). slider ("vô hiệu hóa");

// Không có JQuery
slider.disable ();
}
});
 

Ví dụ 8: Quay lại đầu trang

Chú giải công cụ luôn có thể được hiển thị.

Xem Thêm  5 cách tạo và lưu tệp trong Javascript (Ví dụ đơn giản) - cách tạo tệp js

HTML
 
& amp; ltinput id = "ex8" data-slider-id = 'ex1Slider' type = "text" data-slider-min = "0" data-slider-max = "20" data-slider-step = "1" data -slider-value = "14" / & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex8"). slider ({
chú giải công cụ: 'luôn luôn'
});

// Không có JQuery
var slider = new Slider ("# ex8", {
chú giải công cụ: 'luôn luôn'
});
 

Ví dụ 9: Quay lại đầu trang

Có thể chỉ định độ chính xác (số vị trí sau số thập phân).

HTML
 
& amp; ltinput id = "ex9" type = "text" / & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex9"). slider ({
độ chính xác: 2,
value: 8.115 // Thanh trượt sẽ khởi tạo hiển thị 8.12 do độ chính xác được chỉ định
});

// Không có JQuery
var slider = new Slider ("# ex9", {
độ chính xác: 2,
value: 8.115 // Thanh trượt sẽ khởi tạo hiển thị 8.12 do độ chính xác được chỉ định
});
 

Ví dụ 10: Quay lại đầu trang

Đặt trình xử lý tùy chỉnh.

HTML
 
& amp; ltinput id = "ex10" type = "text" data-slider-handle = "custom" / & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex10"). slider ({});

// Không có JQuery
var slider = new Slider ("# ex10", {});
 
CSS
 
.slider-handle.custom {
nền: trong suốt không có;
/ * Bạn có thể tùy chỉnh tay cầm và đặt hình nền * /
}

/ * Hoặc hiển thị nội dung như ký tự unicode hoặc biểu tượng fontawesome * /
.slider-handle.custom :: before {
chiều cao dòng: 20px;
font-size: 20px;
nội dung: '\ 2605'; / * ký tự sao unicode * /
màu: # 726204;
}
 

Ví dụ 11: Quay lại đầu trang

Sử dụng khoảng bước tùy chỉnh.

HTML
 
& amp; ltinput id = "ex11" type = "text" data-slider-handle = "custom" / & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex11"). slider ({step: 20000, min: 0, max: 200000});

// Không có JQuery
var slider = new Slider ("# ex11", {
bước: 20000,
tối thiểu: 0,
tối đa: 200000
});
 

Ví dụ 12: Quay lại đầu trang

Tô màu cho các đoạn đường cao và thấp.

Thanh trượt một giá trị, rãnh cao:

Lưu ý rằng không có rãnh thấp trên thanh trượt giá trị đơn. Các
vùng nhỏ hơn giá trị của tay cầm là vùng chọn.

Thanh trượt dải, rãnh thấp:

Thanh trượt dải, các bản nhạc thấp và cao và lựa chọn:

HTML
 
& lt;! - Thanh trượt một giá trị, rãnh cao: - & gt;
& amp; ltinput id = "ex12a" type = "text" / & amp; gt & amp; ltbr / & amp; gt
Lưu ý rằng không có rãnh thấp trên thanh trượt giá trị đơn. Vùng nhỏ hơn giá trị của ô điều khiển là vùng chọn.

& lt;! - Thanh trượt dải, rãnh thấp: - & gt;
& amp; ltinput id = "ex12b" type = "text" / & amp; gt & amp; ltbr / & amp; gt

& lt;! - Thanh trượt theo dải, các bản nhạc thấp và cao và lựa chọn: - & gt;
& amp; ltinput id = "ex12c" type = "text" / & amp; gt & amp; ltbr / & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex12a"). slider ({id: "slider12a", min: 0, max: 10, value: 5});
$ ("# ex12b"). slider ({id: "slider12b", min: 0, max: 10, range: true, value: [3, 7]});
$ ("# ex12c"). slider ({id: "slider12c", min: 0, max: 10, range: true, value: [3, 7]});

// Không có JQuery
var sliderA = new Slider ("# ex12a", {id: "slider12a", min: 0, max: 10, value: 5});
var sliderB = new Slider ("# ex12b", {id: "slider12b", min: 0, max: 10, range: true, value: [3, 7]});
var sliderC = new Slider ("# ex12c", {id: "slider12c", min: 0, max: 10, range: true, value: [3, 7]});
 
CSS
 
# slider12a .slider-track-high, # slider12c .slider-track-high {
nền: xanh lá cây;
}

# slider12b .slider-track-low, # slider12c .slider-track-low {
nền: đỏ;
}

# slider12c .slider-selection {
nền: màu vàng;
}
 

Ví dụ 13: Quay lại đầu trang

Sử dụng dấu tích và nhãn.

HTML
 
& lt; input id = "ex13" type = "text" data-slider-ticks = "[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds = "30" data-slider-tick -labels = '["$ 0", "$ 100", "$ 200", "$ 300", "$ 400"]' / & gt;
 
JavaScript
 
// Với JQuery
$ ("# ex13"). thanh trượt ({
    tick: [0, 100, 200, 300, 400],
    ticks_labels: ['$ 0', '$ 100', '$ 200', '$ 300', '$ 400'],
    ticks_snap_bounds: 30
});

// Không có JQuery
var slider = new Slider ("# ex13", {
    tick: [0, 100, 200, 300, 400],
    ticks_labels: ['$ 0', '$ 100', '$ 200', '$ 300', '$ 400'],
    ticks_snap_bounds: 30
});

 

Ví dụ 14: Quay lại đầu trang

Sử dụng dấu tích ở các vị trí cụ thể.

HTML
 
& amp; ltinput id = "ex14" type = "text" data-slider-ticks = "[0, 100, 200, 300, 400]" data-slider-ticks-snap-bounds = "30" data-slider-tick -labels = '["$ 0", "$ 100", "$ 200", "$ 300", "$ 400"]' data-slider-tick-Position = "[0, 30, 70, 90, 100]" / & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex14"). slider ({
    tick: [0, 100, 200, 300, 400],
    ticks_positions: [0, 30, 70, 90, 100],
    ticks_labels: ['$ 0', '$ 100', '$ 200', '$ 300', '$ 400'],
    ticks_snap_bounds: 30
});

// Không có JQuery
var slider = new Slider ("# ex14", {
    tick: [0, 100, 200, 300, 400],
    ticks_positions: [0, 30, 70, 90, 100],
    ticks_labels: ['$ 0', '$ 100', '$ 200', '$ 300', '$ 400'],
    ticks_snap_bounds: 30
});
 

Ví dụ 15: Quay lại đầu trang

Với thang đo logarit.

HTML
 
& lt; input id = "ex15" type = "text" data-slider-min = "1000" data-slider-max = "10000000" data-slider-step = "5" / & gt;
 
JavaScript
 
// Với JQuery
$ ("# ex15"). thanh trượt ({
tối thiểu: 1000,
tối đa: 10000000,
scale: 'logarit',
bước: 10
});

// Không có JQuery
var slider = new Slider ('# ex15', {
tối thiểu: 1000,
tối đa: 10000000,
scale: 'logarit',
bước: 10
});
 

Ví dụ 16: Quay lại đầu trang

Tập trung vào tay cầm thanh trượt sau khi thay đổi giá trị.

Xem Thêm  Hợp nhất danh sách (8 cách) • dữ liệu - thêm danh sách với nhau python

Thanh trượt một giá trị:

Thanh trượt phạm vi:

HTML
 
& lt;! - Thanh trượt một giá trị: - & gt;
& amp; ltinput id = "ex16a" type = "text" / & amp; gt & amp; ltbr / & amp; gt

& lt;! - Thanh trượt phạm vi: - & gt;
& amp; ltinput id = "ex16b" type = "text" / & amp; gt & amp; ltbr / & amp; gt
Lưu ý rằng điều khiển thanh trượt gây ra thay đổi giá trị được tập trung.
 
JavaScript
 
// Với JQuery
$ ("# ex16a"). slider ({min: 0, max: 10, value: 0, focus: true});
$ ("# ex16b"). slider ({min: 0, max: 10, value: [0, 10], focus: true});

// Không có JQuery
var sliderA = new Slider ("# ex16a", {min: 0, max: 10, value: 0, focus: true});
var sliderB = new Slider ("# ex16b", {min: 0, max: 10, value: [0, 10], focus: true});
 

Ví dụ 17: Quay lại đầu trang

Các vị trí chú giải công cụ khác thường.

Thanh trượt ngang với chú giải công cụ ở dưới cùng

Thanh trượt dọc với chú giải công cụ ở bên trái

HTML

& amp; ltinput id = "ex17a" type = "text" / & amp; gt
& amp; ltinput id = "ex17b" type = "text" / & amp; gt
 
JS
 
// Với JQuery
$ ("# ex17a"). thanh trượt ({
tối thiểu: 0,
tối đa: 10,
giá trị: 0,
tooltip_position: 'bottom'
});
$ ("# ex17b"). thanh trượt ({
tối thiểu: 0,
tối đa: 10,
giá trị: 0,
định hướng: 'dọc',
tooltip_position: 'left'
});

// Không có JQuery
var sliderA = new Slider ("# ex17a", {
tối thiểu: 0,
tối đa: 10,
giá trị: 0,
tooltip_position: 'bottom'
});

var sliderB = new Slider ("# ex17b", {
tối thiểu: 0,
tối đa: 10,
giá trị: 0,
định hướng: 'dọc',
tooltip_position: 'left'
});
 

Ví dụ 18: Quay lại đầu trang

Khả năng tiếp cận với các nhãn chỉ hiển thị cho người đọc màn hình.

Thanh trượt với một giá trị và nhãn:

Ví dụ về nhãn thanh trượt

Thanh trượt dải với nhiều nhãn:

Ví dụ giá trị thấp

Ví dụ giá trị cao

HTML
 
& lt; span id = "ex18-label-1" class = "sr-only" & gt; Ví dụ về nhãn thanh trượt & lt; / span & gt;
& lt; input id = "ex18a" type = "text" / & gt;

& lt; span id = "ex18-label-2a" class = "sr-only" & gt; Ví dụ về giá trị thấp & lt; / span & gt;
& lt; span id = "ex18-label-2b" class = "sr-only" & gt; Ví dụ về giá trị cao & lt; / span & gt;
& lt; input id = "ex18b" type = "text" / & gt;
 
JavaScript
 
// Với JQuery
$ ("# ex18a"). thanh trượt ({
tối thiểu: 0,
tối đa: 10,
giá trị: 5,
labellingby: 'ex18-label-1'
});
$ ("# ex18b"). thanh trượt ({
tối thiểu: 0,
tối đa: 10,
giá trị: [3, 6],
labellingby: ['ex18-label-2a', 'ex18-label-2b']
});

// Không có JQuery
var sliderA = new Slider ("# ex18a", {
tối thiểu: 0,
tối đa: 10,
giá trị: 5,
labellingby: 'ex18-label-1'
});
var sliderB = new Slider ("# ex18b", {
tối thiểu: 0,
tối đa: 10,
giá trị: [3, 6],
labellingby: ['ex18-label-2a', 'ex18-label-2b']
});
 

Ví dụ 19: Quay lại đầu trang

Tự động đăng ký dữ liệu-cung cấp = “slider” Phần tử.

Slider-Element không đi kèm với bất kỳ Javascript tùy chỉnh nào:

Ví dụ về nhãn thanh trượt

HTML
 
 & lt; span id = "ex18-label-1" class = "sr-only" & gt; Ví dụ về nhãn thanh trượt & lt; / span & gt;
        & lt; input id = "ex19" type = "text"
              data-cung cấp = "thanh trượt"
              data-slider-ticks = "[1, 2, 3]"
              data-slider-ticks-label = '["short", "medium", "long"]'
              data-slider-min = "1"
              data-slider-max = "3"
              data-slider-step = "1"
              data-slider-value = "3"
              data-slider-tooltip = "hide" / & gt;
 

Ví dụ 20: Quay lại đầu trang

Slider-Elements ban đầu bị ẩn.

Hiển thị

Slider-Element ban đầu bị ẩn, được tiết lộ bởi Javascript:

Ví dụ về nhãn thanh trượt

HTML
 
 & lt; a class = "btn btn-primary" href = "" id = "ex20a" & gt; Hiển thị & lt; / a & gt;
        & lt; div class = "card card-body mb-3" style = "display: none" & gt;
            & lt; span id = "ex18-label-1" class = "sr-only" & gt; Ví dụ về nhãn thanh trượt & lt; / span & gt;
            & lt; input id = "ex19" type = "text"
                  data-cung cấp = "thanh trượt"
                  data-slider-ticks = "[1, 2, 3]"
                  data-slider-ticks-label = '["short", "medium", "long"]'
                  data-slider-min = "1"
                  data-slider-max = "3"
                  data-slider-step = "1"
                  data-slider-value = "3"
                  data-slider-tooltip = "hide" / & gt;
        & lt; / div & gt;
 
JavaScript
 
 $ ('# ex20a'). on ('click', function (e) {
      $ ('# ex20a')
          .cha mẹ()
          .find ('& gt; .card')
          .toggleClass ()
          .find ('đầu vào')
          .slider ('chuyển tiếp');
      e.preventDefault ();
  });
 

Ví dụ 21: Quay lại đầu trang

Tạo một phần tử đầu vào với thuộc tính data-cung cấp = “slider” sẽ tự động biến nó thành một thanh trượt. Các tùy chọn có thể được cung cấp thông qua thuộc tính data-slider- .

HTML
 
 & lt; input id = "ex21" type = "text"
          data-cung cấp = "thanh trượt"
          data-slider-ticks = "[1, 2, 3]"
          data-slider-ticks-label = '["short", "medium", "long"]'
          data-slider-min = "1"
          data-slider-max = "3"
          data-slider-step = "1"
          data-slider-value = "3"
          data-slider-tooltip = "hide" / & gt;
 

Ví dụ 22: Quay lại đầu trang

Đánh dấu phạm vi trên thanh trượt với thuộc tính rangeHighlights .

HTML

& amp; ltinput id = "ex22" type = "text"
     data-slider-id = "slider22"
     data-slider-min = "0"
     data-slider-max = "20"
     data-slider-step = "1"
     data-slider-value = "14"
     data-slider-rangeHighlights = '[{"start": 2, "end": 5, "class": "category1"},
                                   {"start": 7, "end": 8, "class": "category2"},
                                   {"start": 17, "end": 19},
                                   {"start": 17, "end": 24}, // không hiển thị - ngoài phạm vi thanh trượt
                                   {"start": -3, "end": 19}] '/ & gt;
 
JavaScript
 
// Với JQuery
$ ('# ex22'). slider ({
    id: 'slider22',
    tối thiểu: 0,
    tối đa: 20,
    bước 1,
    giá trị: 14,
    rangeHighlights: [{"start": 2, "end": 5, "class": "category1"},
                      {"start": 7, "end": 8, "class": "category2"},
                      {"start": 17, "end": 19},
                      {"start": 17, "end": 24},
                      {"start": -3, "end": 19}]});

// Không có JQuery
var slider = new Slider ("# ex22", {
    id: 'slider22',
    tối thiểu: 0,
    tối đa: 20,
    bước 1,
    giá trị: 14,
    rangeHighlights: [{"start": 2, "end": 5, "class": "category1"},
                      {"start": 7, "end": 8, "class": "category2"},
                      {"start": 17, "end": 19},
                      {"start": 17, "end": 24},
                      {"start": -3, "end": 19}]});
 
CSS
 
# slider22 .slider-selection {
nền: # 81bfde;
}

# slider22 .slider-rangeHighlight {
nền: # f70616;
}

# slider22 .slider-rangeHighlight.category1 {
    nền: # FF9900;
}

# slider22 .slider-rangeHighlight.category2 {
    nền: # 99CC00;
}

 

Ví dụ 23: Quay lại đầu trang

Sử dụng dấu tích ở các vị trí cụ thể.

Xem Thêm  INSERT INTO SELECT tổng quan và ví dụ về câu lệnh - chọn chèn vào bảng

HTML
 
& amp; ltinput id = "ex23" type = "text" data-slider-ticks = "[0, 1, 2, 3, 4]" data-slider-step = "0.01" data-slider-ticks-snap-bounds = "200" data-slider-ticks-tooltip = "true" ticks_positions = "[0, 30, 60, 70, 90, 100]" / & amp; gt
 
JavaScript
 
// Với JQuery
$ ("# ex23"). slider ({
    tick: [0, 1, 2, 3, 4],
    ticks_positions: [0, 30, 60, 70, 90, 100],
    ticks_snap_bounds: 200,
định dạng: function (value) {
return 'Giá trị hiện tại:' + giá trị;
},
ticks_tooltip: true,
bước: 0,01
});

// Không có JQuery
var slider = new Slider ("# ex23", {
    tick: [0, 1, 2, 3, 4],
ticks_positions: [0, 30, 70, 90, 100],
    ticks_snap_bounds: 200,
định dạng: function (value) {
return 'Giá trị hiện tại:' + giá trị;
},
ticks_tooltip: true,
bước: 0,01
});
 

Ví dụ 24: Quay lại đầu trang

chế độ rtl (tự động)

– 5

20

HTML
 
  & lt; span & gt; -5 & lt; / span & gt;
  & lt; span & gt; 20 & lt; / span & gt;
    & lt; input id = "ex24" type = "text" data-slider-min = "- 5" data-slider-max = "20" data-slider-step = "1" data-slider-value = "14" / & gt;
 
JavaScript
 
// Với JQuery
$ ("# ex24"). slider ({});
 

Ví dụ 25: Quay lại đầu trang

Khóa lựa chọn thành tích

HTML
 
& lt; input id = "ex25" type = "text" data-slider-value = "[1, 100]" data-slider-ticks = "[1, 50, 100]" data-slider-lock-to-tick = "true" / & gt;
 
JavaScript
 
// Với JQuery
$ ("# ex25"). thanh trượt ({
giá trị: [1, 100],
tích tắc: [1, 50, 100],
lock_to_ticks: true
});
 

Ví dụ 26: Quay lại đầu trang

Làm mới phương thức với đối tượng `options` tùy chọn

Sử dụng giá trị hiện tại

HTML
 
& lt; input id = "ex26" data-slider-id = "ex26Slider" type = "text" data-slider-min = "0" data-slider-max = "20" data-slider-step = "1" data -slider-value = "10" / & gt;
 
JavaScript
 
// Với JQuery
$ ('# ex26'). slider ('refresh', {useCurrentValue: true});

// Không có JQuery
var slider = new Slider ('# ex26');
slider.refresh ({useCurrentValue: true});
 


Xem thêm những thông tin liên quan đến chủ đề ví dụ về thanh trượt phạm vi bootstrap

Câu chuyện về Bootstrap và bài học sử dụng lung tung bậy bạ

  • Tác giả: Khánh Hùng – Đời sống lập trình viên
  • Ngày đăng: 2020-06-30
  • Đánh giá: 4 ⭐ ( 9394 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đã từng có 1 thời gian rất dài Framework Bootstrap gây ám ảnh cho nhiều Front-end Developer
    Vậy thì Bootstrap là gì? Để tui kể cho anh em một câu chuyện về Bootstrap.
    Subscribe ►https://www.youtube.com/channel/UC7fa4gY0-2IU-19L-SjMivA?sub_confirmation=1
    ●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●
    Bootstrap là gì? Bootstrap có thể được gọi là một hiện tượng Framework (bao gồm HTML5, CSS, JavaScript) đã gây nhiều tiếng vang và ảnh hưởng thời gian dài đến lập trình Front-end, khiến cho nhiều người học code front-end hoang mang và không còn quan tâm nhiều đến các kĩ năng, kiến thức cơ bản để thiết kế Website. Video này tui sẽ chia sẻ lý do tại sao xD

    0:00 Giới thiệu
    2:39 Bootstrap là gì, những ảnh hưởng của Bootstrap
    8:11 Hiện nay Bootstrap có còn sức ảnh hưởng hay hiệu quả trong dự án?
    10:38 Bonus tâm sự nghề nha anh em

    Nhớ Like, Share, Sub và bấm chuông để tui có thêm động lực làm video mới nha anh em, Thank You!!
    Gửi câu hỏi và thắc mắc của bạn cho tui tại đây: https://forms.gle/FBxY5vByTQWwspJU9
    Hoặc COMMENT bên dưới nhé

    backend bootstrap frontend
    —————————
    Subscribe và theo dõi thêm tại:
    Youtube ►https://www.youtube.com/channel/UC7fa4gY0-2IU-19L-SjMivA?sub_confirmation=1

    Khánh Hùng
    – CEO và Founder của Mona Media ( phần mềm web-app theo yêu cầu của khách )
    – 6 năm làm Freelancer ( nghỉ từ 2017 ) trong đó có gần 2 năm là Fulltime Freelancer
    – C .NET, PHP, Front End, IOS Swift developer
    – Tài khoản Freelancer.com và UpWork ( đã bán ) và Vlance top 1

    Tui không phải youtuber toàn thời gian
    Tui cũng không phải dạy làm giàu, bán khoá học
    Tui làm video và tui thấy vui với việc này

Tạo thanh trượt phạm vi

  • Tác giả: hiepsiit.com
  • Đánh giá: 5 ⭐ ( 7675 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Ví dụ về các loại tội phạm trong Bộ luật Hình sự

  • Tác giả: tmsquynhon.com.vn
  • Đánh giá: 4 ⭐ ( 9352 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tội phạm là gì?

19 Ví Dụ Bootstrap 5 Cho Phát Triển Website

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 4 ⭐ ( 6704 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu các ví dụ về Bootstrap 5 trong quá trinh phát triển và thiết kế website nhé!

12 thanh trượt phạm vi jQuery – web tài chính chuyên nghiệp – 0971522486

  • Tác giả: webzado.com
  • Đánh giá: 4 ⭐ ( 9551 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phạm vi dự án vs Phạm vi sản phẩm dự án

  • Tác giả: www.experts.fastwork.vn
  • Đánh giá: 5 ⭐ ( 5385 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phạm vi dự án là gì? Phạm vi sản phẩm dự án là gì? Điều gì tác động đến việc mất kiểm soát phạm vi dự án?

Cách hiển thị thanh trượt nhập phạm vi theo chiều dọc

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 9647 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Đầu tiên, đặt chiều cao lớn hơn chiều rộng. Về lý thuyết, đây là tất cả…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php