20 CSS Javascript Price Range Slider Examples
Bài đăng này đã không được cập nhật trong 4 năm
Chào các bạn!
Cái tên price range slider như không còn xa lạ gì với các bạn nữa rồi nhỉ. Gần như lúc nào price range slider cũng xuất hiện trong các site ecommerce giúp người dùng có thể thuận lợi tìm kiếm sản phẩm cho mình với mức giá phù hợp với túi tiền của họ. Trong bài viết này mình sẽ giới thiệu tới 20 demo khá đẹp về price range slider.
1. Rubber Slider
2. Draggable Price Scale
Price range slider này khá đặc biệt. Mỗi khoảng giá sẽ ứng với các dịch vụ khác nhau. Nó sẽ hiển thị ngay trên phần tooltip cho các bạn. Vô cùng hữu ích.
3. Gear Slider
4. CSS Range Slider
Slide này khá đơn giản, chỉ cần với đoạn script nhỏ là bạn có thể tạo đc price range slide này
var rangeSlider = function(){
var slider = $('.range-slider'),
range = $('.range-slider__range'),
value = $('.range-slider__value');
slider.each(function(){
value.each(function(){
var value = $(this).prev().attr('value');
$(this).html(value);
});
range.on('input', function(){
$(this).next(value).html(this.value);
});
});
};
rangeSlider();
5. Budgetslider
Slide này mang phong cách 3D luôn.
6. Ui Range Slider
Khác với các price range slide bên trên, slide này vô cùng đơn giản, chỉ cần sử dụng thư viện jquery ui mà thôi. Và tất nhiên thì demo cũng chỉ đơn giản thôi.
7. Science Slider
Wow, slide kiểu ổng nghiệm hơi nước, vô cùng đẹp luôn. Rất thích hợp cho các site chuyên bán đồ dùng thí nghiệm.
8. Range Slider Output
9. Custom Accessible Vue Emoji Slider
Price Range Slide này khá thú vị với style của emoji. Lựa chọn giá càng cao thì mức độ yêu thích của emoji càng cao. Ngược lại sẽ là emoji tức giận luôn. Slide này khá thích hợp cho các website bán đồ chơi này.
10. Two Point Range Slider
11. Chromatic Slider
12. Slider 1-5 Scaling
13. Fluid Slider
14. Range
Slide có cái tên không thể ngắn gọn hơn. Cùng với đó là đoạn demo cũng cực kỳ đơn giản.
$("#range").slider
range: "min"
max: 100
value: 50
slide: (e, ui) ->
$("#currentVal").html ui.value
return
15. CSS Custom Range Slider
Demo khá đẹp với tooltip hình giọt nước sẽ to dần khi giá tăng dần.
16. Slider Range Mars Weight Calculator
17. Range Slider
18. Multi-range Slider
Trong 1 loạt slide về price lại xuất hiện slide về time khá là hay và thú vị.
19. Budget Slider
20. Range Slider Animation
Như vậy qua bài này các bạn có thể thấy có khá nhiều price range slide vô cùng đẹp và thú vị. Hi vọng các bạn có thể lựa chọn cho mình demo thích hợp nhất. Chúc các bạn thành công!
All rights reserved