tôi nghĩ cú pháp cơ bản cho một thanh trượt là:jQuery UI Slider không xuất hiện
<div id="slider"></div>
$("#slider").slider()
Nhưng điều đó không làm cho một thanh trượt có thể nhìn thấy. Kiểm tra phần tử div, tôi thấy rằng một số kiểu đã được áp dụng, nhưng thanh trượt không hiển thị.
Dưới đây là một fiddle: http://jsfiddle.net/yqNcn/
Bạn chưa bao gồm CSS cho jQuery UI nên các lớp học được áp dụng nhưng phong cách không (có thực sự là không có gì để áp dụng). Here's một fiddle đã chỉnh sửa bao gồm các kiểu (xem bảng Tài nguyên); thanh trượt có thể nhìn thấy được.
Điều đó thật lạ lùng, jsfiddle không quan tâm đến điều đó mặc dù bạn đã đánh dấu vào hộp kiểm Giao diện người dùng jQuery? Đó là một lỗi hoặc không thực sự nghĩ ra ... jQuery UI là nhiều hơn JS code. – sg3s
Đầu tiên nhập javascript của bạn tập tin * jquery.s và nhập khẩu jquery UI Widget Jquery-ui.js Sau đó Đặt Css của bạn Div Tag với id<div id="slider"></div> Ví dụ này
<div id="slider"></div>
sau đó Gọi Jquery chức năng trượt ....
<script>
$(function() {
$("#slider").slider();
});
</script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#slider-range").slider({
range: true,
min: 1000,
max: 1000000,
values: [ 75000, 300000 ],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) +
" - $" + $("#slider-range").slider("values", 1));
});
</script>
</head>
<body>
<p>
<label for="amount">Price range:</label>
<input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>
Đẹp, bản demo giao diện người dùng jQuery được sao chép và không hoạt động. Tôi chỉ có thể đoán rằng jsfiddle đã sai lầm. – sg3s