non-linear bootstrap slider with negative numbers

Question

I've been searching for a solution for my slider to present non-linear numbers and came across this solution: 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/

The Comaffy function basically makes the slider non-linear. So first 10% of the slider is 0-1. 10% to 80% is 1 to 20 and 80% to 100% is 20 to 500. But these are all positive numbers, and when I try to make the first 10% from -100 to 0, the function basically stops working.

Answer 1

I've created a function which I think can provide a generic solution. You can try that 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);
}