Я пытаюсь создать отображение диапазона, используя Javascript. Это не ползунок диапазона как таковой, но он будет отображать диапазон 2 значений в пределах деления.
Я попытаюсь объяснить с помощьюпример:
- Внешний div 'style-range' содержит абсолютные значения min и max и имеет ширину ровно 183 пикселя. Это граница отображения диапазона.
- Внутренний div 'range' также имеет минимальное и максимальное значения, которые необходимо выделить, как на скриншоте. Так что для этого примера это будет выделенная область очень маленькой ширины рядом с левым краем отображения диапазона.
Внутренний диапазон должен быть более темным указателем в пределах диапазона.
<div class="col-sm style-range abv" data-step="0" data-max="15" data-min="2" data-name="abv">
<div class="range" data-min="2.2" data-max="3.3">
<span data-value="2.7"></span>
</div>
Это буквально, насколько я понял с помощью JavaScript ...
// calc the range of an attribute
recipe.calcRange = function() {
var $item = $( '.ranges [data-name="abv"]' );
var width = $item.width();
var diff = $item.data( 'max' ) - $( item ).data( 'min' );
}
Мне нужна помощь с Javascript частью этого, чтобысделать математические расчеты. В основном мне нужно было бы преобразовать значения 2,2 и 3,3 в их соответствующие позиции% в пределах ползунка диапазона.
Таким образом, 2,2 может стать 5%, что означает, что оно начинается на 5% от левой границы, а 3,3 может быть 16%, что означает, что он заканчивается на 16% от левой границы.