Make Icon based range slider using CSS & Javascript

This range slider script will help you to display an awesome Icon based range slider. You can either click on icon or bar it also changes the color as per slider range. The slider purely created on CSS and javascript no third party plugin needed.
Icon based range slider using CSS, Javascript

HTML

<div class="input-range">
  <div id="range-slider" data-value=""></div>
  <div id="labels-list" class="labels" data-value=""></div>
</div>


CSS

@import "lesshat";
 
@steps : 6; // Set max value here
@padding: unit(100 / @steps, %); 
@container-width:  unit((@steps / 100) * 500, %) ; 
 

 
@gray : #d2d2d2;
@light-gray: #f1f1f1;
@orange: #ffb72f;
@pink: #fce0d6;
@blue: #bad6ef;
@yellow: #ffe12f;
@black:  #383838;
@red: #fd6b6b;
 

html{
  min-height:100%;
}
 
body{
  background: url(https://i.imgur.com/t17127v.jpg) no-repeat;
  background-size: 100% auto;
  background-position: center center;
  margin: 0;
  width: 100%;
  height: 100%;
}
 
.input-range {
  position: absolute;
  top: 50%;
  left: 50%;
  width: @container-width;
  .translate(-50%,-50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
 
  #range-slider{
    width: calc(100% - @padding);
    order: 10;
    margin: 0;
    border:none;
    background-color:@light-gray;
    margin-top: 2vw;
    border-radius:2vw;
    height: .8vw;
 
    @media screen and (max-width:768px){
      margin-top: 4vw;
    }
 
 
    .ui-slider-range {
      background-color:@blue;
      border-radius:2vw;
      .transition(all ease 250ms);
      cursor:pointer;
      height: .8vw;
    }
 
    .ui-slider-handle{
      background-color: @blue;
      border: none;
      width: 1.5vw;
      height: 1.5vw;
      border-radius: 20px;
      transform: translateY(-50%);
      top: 50%;
      margin-left: -.75vw;
      box-shadow: 0 0 5px rgba(0, 0, 0, 0.20);
      outline:none;
      .transition(all ease 250ms);
      cursor:pointer;
 
    }
 
    each(range(@steps){     
      &[data-value="@{value}"] {
        .ui-slider-range,
        .ui-slider-handle {
          background-color: if((@value > @steps / 3), if((@value > @steps / 1.5), @red, @orange), @blue);
        }
      }
    });
  }
 
  .labels {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    width: 100%;
 
    .fas {
      width:calc( 100% / @steps);
      text-align: center;
      cursor:pointer;
 
      &:before{
        font-size: 4vw;
      }
 
      &:hover{
        .scale(1.1);
      }
      color: @light-gray;
      .transition(all ease 250ms);
    }
 
    each(range(@steps){     
      &[data-value="@{value}"] .fas:nth-child(-n + @{value}){
        color: if((@value > @steps / 3), if((@value > @steps / 1.5), @red, @orange), @blue);
        text-shadow:0 0 10px rgba(0, 0, 0, 0.2);
      }
    });
  }
}


JS

var max = 6, 
    initvalue = 4, 
    icon = "fa-fire", 
    target = document.querySelectorAll('[data-value]'),
    listIcon = document.getElementById("labels-list");
 
  
 
  function updateValue(target, value){
    target.forEach(function(currentIndex) {
      currentIndex.dataset.value =  value;
    });
  }
 
  
 
  for (i = 0; i < max; i++) { 
    var picto = "<i class='fas "+ icon +"'></i>";
    $(".labels").append(picto);
  }
 
  updateValue(target, initvalue);
 
  
 
  $('.fas').on( "click", function(){
    var index = $(this).index() + 1;
    $( "#range-slider" ).slider( "value", index );
    updateValue(target, index);
  });
 
 
  
 
  $( "#range-slider" ).slider({
    range: "min",
    value: initvalue,
    min: 1, 
    max: max, 
 
    slide: function( event, ui ) {                     
      updateValue(target, ui.value);
    }
  });

See live demo and download source code.

DEMO | DOWNLOAD

This awesome script developed by lefourbefromage. Visit their official repository for more information and follow for future updates.


Don’t forget to Subscribe My Public Notebook for more useful free scripts, tutorials and articles.