HTML5 & CSS3

Range Sliders - Đơn giản như đan rổ

Chia sẻ nhanh

Nhớ ngày nào ngồi code hục mặt, lớp nọ lớp chai đè sấp đè ngửa lên nhau mới nhìn ra hồn được tí. Còn bây giờ dễ quá anh em ạ

1. HTML

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
</div>

 

2. CSS

.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: #4CAF50; /* 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: #4CAF50; /* Green background */
    cursor: pointer; /* Cursor on hover */
}

 

3. JavaScript

Hoàn thành 2 bước trên là có ngay sản phẩm rồi. Nhưng để xử lý thì bạn cần thêm đoạn nhỏ Js như sau

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;
}

Đoạn JS này đơn giản chỉ lấy giá trị của range sliders rồi hiển thị nó.

 

4. Round Slider

Để tạo round slider handle, chỉ cần border-radius là cũng khá đẹp rồi. CSS dạng như sau

.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: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

 

5. Slider Icon/Image

Để tạo slider handle dạng icon hoặc image, anh em sài background cho tôi là ok

 

.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;
}

 

KẾT QUẢ

 

Square Range Sliders

 

Round Range Sliders

 

Slider Icon/Image

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?