<fieldset class="formSlider">
        <legend class="applicationForm__text">Оцените выраженность симптомов по 10 бальной шкале:</legend>
        <div class="__range __range-step">
        <input value="2" type="range" max="10" min="1" step="1" list="ticks1">
        <datalist id="ticks1">
          <option value="1">&#128522;</option>
          <option value="2">&#128512;</option>
          <option value="3">&#128528;</option>
          <option value="4">&#128550;</option>
          <option value="5">&#128543;</option>
          <option value="6">&#128549;</option>
          <option value="7">&#128554;</option>
          <option value="8">&#128547;</option>
          <option value="9">&#128555;</option>
          <option value="10">&#128562;</option>
        </datalist>
</div>
      </fieldset>

.__range input
{
  outline: none;
  -webkit-appearance: none;
  background-color: #aaa;
  height: 3px;
  width: 100%;
  margin: 10px auto;
}
.__range input::-webkit-slider-thumb
{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab; 
}            
.__range input::-moz-range-thumb
{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab; 
}
.__range input::-ms-thumb
{
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background-color: green;
  border-radius: 50%;
  cursor: -moz-grab;
  cursor: -webkit-grab; 
}
.__range-step{
  position: relative;                
}

.__range-max{
  float: right;
}
.__range-step input::-webkit-slider-thumb
{
  background: transparent;
}            
.__range-step input::-moz-range-thumb
{
  background: transparent;
}
.__range-step input::-ms-thumb
{
  background: transparent;
}
.__range-step datalist {
  position:relative;
  display: flex;
  justify-content: space-between;
  height: auto;
  bottom: 16px;
  /* disable text selection */
  -webkit-user-select: none; /* Safari */        
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE10+/Edge */                
  user-select: none; /* Standard */
  /* disable click events */
  pointer-events:none;  
}
.__range-step datalist option {
  width: 10px;
  height: 10px;
  min-height: 10px;
  border-radius: 100px;
  /* hide text */
  white-space: nowrap;       
  padding:0;
  line-height: 55px;
}


 .__range-step-popup output 
{ 
  position: absolute;
  background-color: green;                
  width: 20px;
  height: 20px; 
  text-align: center; 
  color: white; 
  border-radius: 100px; 
  display: inline-block; 
  font-size:12px;
  bottom: 100%;
  left: 0;
  vertical-align: middle;
  line-height: 30px;
}
.__range-step-popup .__range-output-square{
  padding: 0 5px; 
  min-width: 25px;
  width: auto !important;                
  border-radius: 5px !important;
}
.__range-step-popup output:after 
{ 
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-top: 10px solid green;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  top: 90%;
  left: 50%;
  margin-left: -10px;
  margin-top: -1px;
}
.__range-step-popup datalist{
  overflow:hidden;
}
.__range-step{
  margin:0 40px;
}
.__range-step-popup{
  margin:40px 40px;
}
.formSlider {
  border: none;
}
.applicationForm__text {
  font-weight: 600;
  color: #444;
}
option  {
    opacity: 0.8;
}

document.querySelectorAll(".__range-step").forEach(function(ctrl) {
  var el = ctrl.querySelector('input');        
  var output = ctrl.querySelector('output'); 
  var newPoint, newPlace, offset;
  el.oninput =function(){ 
    // colorize step options
    ctrl.querySelectorAll("option").forEach(function(opt) {
      if(opt.value<=el.valueAsNumber) {         
        opt.style.backgroundColor = 'green';
        opt.classList.add("stepout"); 
      } else {
        opt.style.backgroundColor = '#aaa'; 
        opt.classList.remove("stepout"); 
    }
    });           
    // colorize before and after
    var valPercent = (el.valueAsNumber  - parseInt(el.min)) / (parseInt(el.max) - parseInt(el.min));            
    var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+
    valPercent+', green), color-stop('+
    valPercent+', #aaa));';
    el.style = style;

    // Popup
    if((' ' + ctrl.className + ' ').indexOf(' ' + '__range-step-popup' + ' ') > -1)
    {
      var selectedOpt=ctrl.querySelector('option[value="'+el.value+'"]');
      output.innerText= selectedOpt.text;
      output.style.left = "50%"; 
      output.style.left = ((selectedOpt.offsetLeft + selectedOpt.offsetWidth/2) - output.offsetWidth/2) + 'px'; 
    }           
  };
  el.oninput();    
});

window.onresize = function(){
  document.querySelectorAll(".__range").forEach(function(ctrl) {
    var el = ctrl.querySelector('input');    
    el.oninput();    
  });
};