如何更改每个自定义范围步骤上图标的颜色

var arr = new Array();
arr[1] = "everyone";
arr[2] = "show my group only";
arr[3] = "show only me";

var rangeSlider = function() {
  var slider = $(".range-slider"),
    range = $(".range-slider__range"),
    value = $(".range-slider__value");

  slider.each(function() {
    value.each(function() {
      var value = $(this)
        .prev()
        .attr("value");
      $(this).html(arr[value]);
    });

    range.on("input", function() {
      $(this)
        .next(value)
        .html(arr[this.value]);
    });

    // Set active icons
    $('.range-icons li').removeClass('active selected');
    var icons = $('.range-icons').find('li:nth-child(' + icons + ')');
    icons.addClass('active selected');
    return style;
  });
};

rangeSlider();

*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  padding: 60px 20px;
}

@media (min-width: 600px) {
  body {
    padding: 60px;
  }
}

.range-slider {
  margin: 0;
}

.range-slider {
  width: 24%;
}

.range-slider__range {
  -webkit-appearance: none;
  /*width: calc(100% - (73px));*/
  width: 100%;
  height: 6px;
  border-radius: 5px;
  background: #d7dcdf;
  outline: none;
  padding: 0;
  margin: 0;
}

.range-slider__range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2c3e50;
  cursor: pointer;
  transition: background .15s ease-in-out;
}

.range-slider__range::-webkit-slider-thumb:hover {
  background: #1abc9c;
}

.range-slider__range:active::-webkit-slider-thumb {
  background: #1abc9c;
}

.range-slider__range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 50%;
  background: #2c3e50;
  cursor: grab;
  transition: background .15s ease-in-out;
}

.range-slider__range:active::-moz-range-thumb {
  cursor: grabbing;
  background: #1abc9c;
}

.range-slider__range::-moz-range-thumb:hover {
  background: #1abc9c;
}

.range-slider__value {
  display: block;
  position: relative;
  color: #fff;
  font-size: 12px;
  margin-top: 10px;
  line-height: 20px;
  text-align: center;
  background: green;
  padding: 0;
}


/*.range-slider__value:after {
  position: absolute;
  top: 8px;
  left: -7px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-right: 7px solid #2c3e50;
  border-bottom: 7px solid transparent;
  content: '';
}*/

::-moz-range-track {
  background: #d7dcdf;
  border: 0;
}

input::-moz-focus-inner,
input::-moz-focus-outer {
  border: 0;
}


/*.range-labels {
  margin: 9px -21px 0;
  padding: 0;
  list-style: none;
}
.range-labels li {
  position: relative;
  float: left;
  width: 60px;
  text-align: center;
  color: #b2b2b2;
  font-size: 14px;
  cursor: pointer;
}

.range-labels .active {
  color: #37adbf;
}
.range-labels .selected::before {
  background: #37adbf;
}
.range-labels .active.selected::before {
  display: none;
}*/


/*icons*/

.range-icons {
  margin: 9px -20px 0;
  padding: 0;
  list-style: none;
}

.range-icons li {
  position: relative;
  float: left;
  width: 33%;
  text-align: center;
  color: #b2b2b2;
  font-size: 10px;
}
.range-icons .active {
  color: #37adbf;
}
.range-icons .selected::before {
  background: #37adbf;
}
.range-icons .active.selected::before {
  display: none;
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div class="range-slider">
  <ul class="range-icons clearfix">
    <li class="active selected"><i class="material-icons">group</i></li>
    <li><i class="material-icons">person</i></li>
    <li><i class="material-icons">lock</i></li>
  </ul>

  <input class="range-slider__range" type="range" value="1" min="1" max="3" step="1">
  <span class="range-slider__value">0</span>
</div>