Question

我一直在寻找滑块的解决方案来呈现非线性数字并遇到了这个解决方案： 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.但这些都是正数，当我尝试将前100％从-100变为0时，该功能基本上停止工作。 / p>

Answer 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);
}

带负数的非线性自举滑块

1 个答案: