javascript - 使用 Javascript 做一些数学计算来计算范围

Question

我正在尝试使用 Javascript 创建范围显示。它本身不是一个范围滑块，但会在一个 div 中显示 2 个值的范围。

我将尝试用一个例子来解释：

• 外部 'style-range' div 包含绝对最小值和最大值，并且宽度正好为 183 像素。这是范围显示的边界。
• 内部“范围”div 还具有需要突出显示的最小值和最大值，如屏幕截图中所示。所以对于这个例子，它将是一个非常小的宽度突出显示区域，靠近范围显示的左边缘。

• 内部跨度需要是范围内较暗的指针。

  <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% 处结束。

标签： javascriptjquerymath