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ị.
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ị.
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ể.
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 xD0: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 emNhớ 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=1Khá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 1Tui 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