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

About Author

Author Image
Dipak Kumar Singh

Dipak is a skilled HTML Developer, expertise in UI Development. Dipak likes watching movies and playing computer games.

Request for Proposal

Name is required

Comment is required

Sending message..