Как задать двойную шкалу у range slider?

119

16 января 2020, 18:50

Нужно сделать вот такой слайдер:

Проблема в том, что слайдеру нужно задать две шкалы - в верхней количество (50 - 20 000), в нижней проценты (от 0 до -30%). Ползунок так же должен динамически подхватывать два текущих значения - верхнее в штуках и нижнее в процентах.

Все текущие решения, которые я находила определяют только одну шкалу. Даже если задать max и min значения промежутка в штуках, а массив values (значений нижней шкалы) в процентах - получим нижнюю шкалу в процентах, крайние значения в процентах и ползунок, отражающий только их:

Как задать дополнительную шкалу для слайдера и заставить ползунок отображать оба значения?

P.S.: использую Ion.RangeSlider (ionden.com/a/plugins/ion.rangeslider/index.html), но это не принципиально, рассматривала и другие варианты тоже.

P.P.S.: стили потом подгоню под нужные, на них можно не обращать внимания

Answer 1

Самое сложное в создании двойной шкалы - это определить, сколько процентов от 0 до -30% составляет один шаг, если шаг - это 50 пунктов. Остальное - несколько строк на jQuery:

$('input').change(function(){ 
  $('.count').text($(this).val()); 
  if($(this).val() == 50) { 
    $('.procent span').text(0); 
  } 
  else { 
    $('.procent span').text(-($(this).val()/666).toFixed(1)); 
  } 
});

input { 
  width: 100%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<p class="count">50</p> 
<input type="range" min="50" max="20000" step="50" value="50"> 
<p class="procent"><span>0</span>%</p>