Cách thực hiện - 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.
Mặc định:
Quảng trường:
Tròn:
Hình ảnh:
Giá trị:Tạo một thanh trượt phạm vi
Bước 1) Thêm HTML:
Ví dụ
<div class="slidecontainer">
<input type="range" min="1" max="100"
value="50" class="slider" id="myRange">
</div>
Bước 2) Thêm CSS:
Ví 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 */
}
Hãy tự mình thử »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:
Ví 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;
}
Hãy tự mình thử »Thanh trượt tròn
Để tạo một tay cầm thanh trượt tròn, hãy sử dụng thuộc tính border-radius
. Mẹo: Đặt chiều cao của thanh trượt thành một giá trị khác với giá trị hình thu nhỏ của thanh trượt nếu bạn muốn chiều cao không bằng nhau (trong ví dụ này là 15px so với 25px):
Ví 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;
}
Hãy tự mình thử »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 tính background
và chèn url hình ảnh:
Ví 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;
}
Hãy tự mình thử »