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, %); // Scaling the slider
@container-width:  unit((@steps / 100) * 500, %) ; // Container width
 
// Colors 
 
@gray : #d2d2d2;
@light-gray: #f1f1f1;
@orange: #ffb72f;
@pink: #fce0d6;
@blue: #bad6ef;
@yellow: #ffe12f;
@black:  #383838;
@red: #fd6b6b;
 
// Style
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, // Set max value
    initvalue = 4, // Set the initial value
    icon = "fa-fire", // Set the icon (https://fontawesome.com/icons)
    target = document.querySelectorAll('[data-value]'),
    listIcon = document.getElementById("labels-list");
 
  // Function to update du value
 
  function updateValue(target, value){
    target.forEach(function(currentIndex) {
      currentIndex.dataset.value =  value;
    });
  }
 
  // Init the number of item with the initial value settings
 
  for (i = 0; i < max; i++) { 
    var picto = "<i class='fas "+ icon +"'></i>";
    $(".labels").append(picto);
  }
 
  updateValue(target, initvalue);
 
  // Update the slider on click
 
  $('.fas').on( "click", function(){
    var index = $(this).index() + 1;
    $( "#range-slider" ).slider( "value", index );
    updateValue(target, index);
  });
 
 
  // Init the slider
 
  $( "#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.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.