带负数的非线性引导滑块答案

【问题标题】：non-linear bootstrap slider with negative numbers带负数的非线性引导滑块
【发布时间】：2016-11-15 09:25:27
【问题描述】：

我一直在为我的滑块寻找呈现非线性数字的解决方案，并遇到了这个解决方案： JQuery UI Slider with Non-linear/Exponential/Logarithmic steps

HTML：

<input type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="[0,100]" id="sl2" style="width:60%">

JS：

function commafy(val) {
    var toPresent = 0;
    if (val < 10) {
        toPresent = (val / 10) * 1;
    } else if (val <= 80) { 
        toPresent = 1+ (val - 10) / 70 * 20;
    } else {
        toPresent = 1+20 + (val - 80) / 20 * 500;
    };
    return toPresent;
}

        $("#sl2").slider({
            reversed : true,
            tooltip_split: true,
            formatter: function(value) {
                return parseFloat(commafy(value)).toFixed(2);
            },
        });

JSfiddle：https://jsfiddle.net/hw1aer2f/1/

Comaffy 函数基本上使滑块成为非线性的。所以前 10% 的滑块是 0-1。 10% 到 80% 是 1 到 20，80% 到 100% 是 20 到 500。但这些都是正数，当我尝试将前 10% 从 -100 变为 0 时，该函数基本上停止工作。

【问题讨论】：

标签： javascript jquery html twitter-bootstrap slider

【解决方案1】：

我创建了一个我认为可以提供通用解决方案的函数。你可以试试here。

// currentValue: the actual value of the slider
// min: minimum value on the slider (0)
// max: maximum value on the slider (10)
// scaleMin: desired range minimum value (-100)
// scaleMax: desired range maximum value (0)
function calc(currentValue, min, max, scaleMin, scaleMax) {
  return scaleMin + currentValue * (scaleMax - scaleMin) / (max - min);
}

【讨论】：