Range slider with dynamic icons

index.html

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

range-slider-with-dynamic-icons.markdown

Range slider with dynamic icons

A Pen by LeFourbeFromage on CodePen.

License.

script.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);
    }
  });

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/less.js/3.10.3/less.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

style.less

@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);
      }
    });
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />