Question

与大多数开发人员一样，我的数学技能也很差。

我有一个值为0到〜的滑块，滑块的前半部分应该通过刻度0-10，而滑块的后半部分应该贯穿值11-〜。

我所拥有的解决方案非常具有程序性，如下所示：

var sliderPercent = timeSlider.sliderPosition;

// What number on the scale of 0 to hoursMax does our % equal?
var position = (this.options.hoursMax / 100) * sliderPercent;

var newMin = 0;
var newMax = 10 * 2; // new max is 20, so half way is 10.

var oldRange = (this.options.hoursMax - this.options.hoursMin);
var newRange = (newMax - newMin); // new range is 0-20

if(sliderPercent > 50) {
    newRange = (this.options.hoursMax + newMax - this.options.hoursMin);
    position -= newMax;
}

var newValue =  ((position * newRange) / oldRange);

与所有事情一样，肯定有更好的方法来做到这一点。涉及log和exp以及那些可爱的数学函数的东西。

如果我可以轻松地将滑块划分为具有不同范围的部分，那也很好。 Perpahs 50％ - 75％将是11 - 50，最后一个季度50 - 〜。我正在寻找如何建立更一般的解决方案的理解。

Answer 1

如果我理解正确，您正在寻找一种将滑块分割成多个部分以便映射到结果值的方法。

即。这样的东西适用于线性范围：

// define sections as a sparse array holding slider ranges:
var sections = [];
sections[50] = 10;        // map [0, 50>  to [0, 10>
sections[60] = 20;        // map [50, 60>  to [10, 20>
sections[70] = 100;       // map [60, 70>  to [20, 100>
sections[80] = 500;       // map [70, 80>  to [100, 500>
sections[90] = 1000;      // map [80, 90> to [500, 1000>
sections[100] = 10000;    // map [90, 100> to [500, 1000>

function mapPercentToValue(percent) {

    var previousKey = 0;
    var sectionStart = 0;
    var sectionEnd = 0;

    for (var key in sections) {
        sectionEnd = sections[key];
        if (key >= percent) {
            break;
        }
        sectionStart = sectionEnd;
        previousKey = key;
    }

    return (percent - previousKey) 
        / (key - previousKey) 
        * (sectionEnd - sectionStart) + sectionStart;
}

将滑块值划分为范围段

1 个答案: