Làm thế nào để - Thanh trượt phạm vi
Tìm hiểu cách tạo thanh trượt phạm vi tùy chỉnh bằng CSS và JavaScript.
Vỡ nợ:
Quảng trường:
Chung quanh:
Hình ảnh:
Giá trị: 50Tạo một Range Slider
Bước 1) Thêm HTML:
Thí dụ
<div class="slidecontainer">
<input type="range" min="1" max="100"
value="50" class="slider" id="myRange">
</div>
Bước 2) Thêm CSS:
Thí dụ
.slidecontainer {
width: 100%; /* Width of the outside
container */
}
/* The slider itself */
.slider
{
-webkit-appearance: none; /* Override default
CSS styles */
appearance: none;
width:
100%; /* Full-width */
height: 25px; /* Specified height
*/
background: #d3d3d3; /* Grey background */
outline:
none; /* Remove outline */
opacity: 0.7; /* Set
transparency (for mouse-over effects on hover) */
-webkit-transition:
.2s; /* 0.2 seconds transition on hover */
transition: opacity .2s;
}
/* Mouse-over
effects */
.slider:hover
{
opacity: 1; /* Fully shown on mouse-over */
}
/* The slider handle (use -webkit- (Chrome, Opera, Safari,
Edge) and -moz- (Firefox) to override default look) */
.slider::-webkit-slider-thumb {
-webkit-appearance: none; /* Override default look */
appearance: none;
width: 25px; /* Set a specific slider handle width */
height: 25px;
/* Slider handle height */
background: #04AA6D; /* Green
background */
cursor: pointer; /* Cursor on hover */
}
.slider::-moz-range-thumb
{
width: 25px; /* Set a specific slider handle width */
height: 25px;
/* Slider handle height */
background: #04AA6D; /* Green background */
cursor: pointer;
/* Cursor on hover */
}
Bước 3) Thêm JavaScript:
Tạo thanh trượt phạm vi động để hiển thị giá trị hiện tại, bằng JavaScript:
Thí dụ
var slider = document.getElementById("myRange");
var output =
document.getElementById("demo");
output.innerHTML = slider.value;
// Display the default slider value
// Update the current slider
value (each time you drag the slider handle)
slider.oninput = function() {
output.innerHTML =
this.value;
}
Trượt tròn
Để tạo một tay cầm thanh trượt tròn, hãy sử dụng thuộc border-radius
tính. Mẹo:
Đặt chiều cao của thanh trượt thành một giá trị khác với giá trị thích của thanh trượt nếu bạn muốn chiều cao không bằng nhau (15px so với 25px trong ví dụ này):
Thí dụ
.slider
{
-webkit-appearance: none;
width:
100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline:
none;
opacity: 0.7;
-webkit-transition:
.2s;
transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}
.slider::-moz-range-thumb
{
width: 25px;
height: 25px;
border-radius: 50%;
background: #04AA6D;
cursor: pointer;
}
Biểu tượng / Hình ảnh thanh trượt
Để tạo biểu tượng / hình ảnh tay cầm thanh trượt, hãy sử dụng thuộc background
tính và chèn url hình ảnh:
Thí dụ
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 23px;
height: 24px;
border:
0;
background: url('contrasticon.png');
cursor: pointer;
}
.slider::-moz-range-thumb
{
width: 23px;
height: 25px;
border: 0;
background: url('contrasticon.png');
cursor: pointer;
}