0

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

range slider с верхней и нижней шкалой

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

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

range slider с одной шкалой

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

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

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

1 ответ 1

0

Самое сложное в создании двойной шкалы - это определить, сколько процентов от 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.