Date Range Slider with HTML and CSS
Posted By : Dipak Kumar Singh | 30-Nov-2017
The basic slider has a single handle with the horizontal layout so it can be moved with arrow keys of the keyboard and also with the mouse.
Options:-
max
We set the value of the maximum slider slides. The default value is 100. Set the value of the slider with the max option specified.Number type only uses.
min
We set the value of the minimum slider slides. The default value is 0. Set the value of the slider with the min option specified. Number type only uses.
range
Initialize the slider range value with the range option specified.
step
The min and max size or amount Calculates for each step the slider takes. The full unique value of the slider range (max-min) step.Set the value of the slider with the step option specified.
value
It will calculate the value of the slider. Calculates the value of the first handle.There is more than one handle. Set the value of the slider with the value option specified.Number type only uses.
This is code adds to JavaScript file for slider functions like slider change or hover on slider
var sheet = document.createElement('style'),
$rangeInput = $('.range input'),
prefs = ['webkit-slider-runnable-track', 'moz-range-track', 'ms-track'];
document.body.appendChild(sheet);
var getTrackStyle = function (el) {
var curVal = el.value,
val = (curVal - 1) * 16.666666667,
style = '';
Set active label
$('.range-labels li').removeClass('active selected');
var curLabel = $('.range-labels').find('li:nth-child(' + curVal + ')');
curLabel.addClass('active selected');
curLabel.prevAll().addClass('selected');
Change background gradient
for (var i = 0; i < prefs.length; i++) {
style += '.range {background: linear-gradient(to right, #37adbf 0%, #37adbf ' + val + '%, #fff ' + val + '%, #fff 100%)}';
style += '.range input::-' + prefs[i] + '{background: linear-gradient(to right, #37adbf 0%, #37adbf ' + val + '%, #b2b2b2 ' + val + '%, #b2b2b2 100%)}';
}
return style;
}
$rangeInput.on('input', function () {
sheet.textContent = getTrackStyle(this);
});
Change input value on label click
$('.range-labels li').on('click', function () {
var index = $(this).index();
$rangeInput.val(index + 1).trigger('input');
});
This code adds in CSS file for slider styling.
body {
padding: 100px;
}
@mixin rangeThumb {
width: 18px;
height: 18px;
margin: -8px 0 0;
border-radius: 50%;
background: #37adbf;
cursor: pointer;
border: 0 !important;
}
@mixin rangeTrack {
width: 100%;
height: 2px;
cursor: pointer;
background: #b2b2b2;
}
.range {
position: relative;
width: 550px;
height: 5px;
}
.range input {
width: 100%;
position: absolute;
top: 2px;
height: 0;
-webkit-appearance: none;
// Thumb
&::-webkit-slider-thumb {
-webkit-appearance: none; // needed again for Chrome & Safari
@include rangeThumb;
}
&::-moz-range-thumb {
@include rangeThumb;
}
&::-ms-thumb {
@include rangeThumb;
}
// Track
&::-webkit-slider-runnable-track {
@include rangeTrack;
}
&::-moz-range-track {
@include rangeTrack;
}
&::-ms-track {
@include rangeTrack;
}
&:focus { // override outline/background on focus
background: none;
outline: none;
}
&::-ms-track { // A little somethin' somethin' for IE
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
}
// Labels below slider
.range-labels {
margin: 18px -41px 0;
padding: 0;
list-style: none;
li {
position: relative;
float: left;
width: 90.25px;
text-align: center;
color: #b2b2b2;
font-size: 14px;
cursor: pointer;
&::before {
position: absolute;
top: -25px;
right: 0;
left: 0;
content: "";
margin: 0 auto;
width: 9px;
height: 9px;
background: #b2b2b2;
border-radius: 50%;
}
}
.active {
color: #37adbf;
}
.selected::before {
background: #37adbf;
}
.active.selected::before {
display: none;
}
}
This code adds to HTML file for the slider.
- Today
- 2 days
- 3 days
- 4 days
- 5 days
- 6 days
- 7 days
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Dipak Kumar Singh
Dipak is a skilled HTML Developer, expertise in UI Development. Dipak likes watching movies and playing computer games.