Как добавить поле процент в rangeSlider?

179

18 января 2020, 07:20

Создаю новое поле в rangeSlider но из за не знания "как это сделать" столкнулся с проблемой Вот попытка :

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="http://maximshaxim.0fees.us/rangeslider.css"> 
</head> 
 
<body> 
  <br> 
  <br> 
  <span id="js-persent"></span> 
  <br> 
  <br> 
  <input type="range" min="1" max="1000" step="2" value="10" id="js-ran" data-persent="10"> 
  <br> 
  <br> 
  <span id="js-input"></span> 
 
  <script src="http://maximshaxim.0fees.us/jquery.min.js"></script> 
  <script src="http://maximshaxim.0fees.us/rangeslider.min.js"></script> 
  <script> 
    $(function() { 
 
      var ran = $("#js-ran"); 
      var inp = $("#js-input"); 
      var per = $("#js-persent"); 
 
      ran.rangeslider({ 
        polyfill: false, 
        onInit: function() { 
          inp.text(ran.val()); 
        }, 
        onSlide: function(position, value) { 
          inp.text(value); 
          per.text(data); 
        }, 
      }); 
 
    }) 
  </script> 
 
</body> 
 
</html>

Добавил поле data-persent так же показал плагину что он должен видеть что это должно выводится в span#js-persent таким образом :

        onSlide: function(position, value) {
        inp.text(value);
        per.text(data);
    },

но разумеется что не работает это так как нету основного вычесления которое должно выводить процент к примеру 0% 50% 100%

Как это можно реализовать ?

Рабочая ссылка без отображения поля с процентами: http://maximshaxim.0fees.us/

Answer 1

Все предельно просто, чтобы нормализовать значение, т.е. привести его в диапазон от 0 до 1 необходимо разделить текущее значение на разницу между максимом и минимум для этого слайдера.

let min = Number(ran.attr('min');
let max = Number(ran.attr('min');
let norm = value/(max - min);

Теперь чтобы привести его к % нужно его умножить на 100:

let percent = norm * 100 + "%";

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как добавить поле процент в rangeSlider?

Создать DBF-файл из таблицы postgre

Как отобразить WPF контрол на панели задач Windows?

Отправка документа на печать

SmtpClient. Отправка Email