javascript - 用于音量控制的反向 slider 插件

Question

我一直在修改这个插件:http://andreruffert.github.io/rangeslider.js/这样它就可以垂直而不是水平地进行音量控制。

我还设法让它以正确的相反顺序放置填充物和 handle 。因此，例如，如果我将值设置为 75，它会朝向顶部而不是底部。

但我很难让它在单击和拖动时执行此操作。目前，如果我单击 slider 的顶部，它会将值设置为 0，如果我向下拖动， handle 将向上移动。所以它需要反过来做这些。

这是我目前所拥有的 fiddle :http://jsfiddle.net/g7yhLkt1/

看来问题出在这两个地方:

Plugin.prototype.handleDown = function(e) {
    e.preventDefault();
    this.$document.on(this.moveEvent, this.handleMove);
    this.$document.on(this.endEvent, this.handleEnd);

    // If we click on the handle don't set the new position
    if ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1) {
        return;
    }

    var posY    = this.getRelativePosition(e),
        rangeY  = this.$range[0].getBoundingClientRect().top,
        handleY = this.getPositionFromNode(this.$handle[0]) - rangeY;

    this.setPosition(posY - this.grabY);

    if (posY >= handleY && posY < handleY + this.handleHeight) {
        this.grabY = posY - handleY;
    }
};

Plugin.prototype.handleMove = function(e) {
    e.preventDefault();
    var posY = this.getRelativePosition(e);
    this.setPosition(posY - this.grabY);
};

两者都使用 setPosition 函数(这似乎没问题，就像我手动设置值然后它位于正确的位置一样)。所以看起来他们为点击和拖动传递了不正确的值。他们还都使用 getRelativePosition 函数来获取相对于 slider 的位置。

getRelativePosition 函数如下所示:

Plugin.prototype.getRelativePosition = function(e) {
    // Get the offset left relative to the viewport
    var rangeY  = this.$range[0].getBoundingClientRect().top,
        pageY   = 0;

    if (typeof e.pageY !== 'undefined') {
        pageY = e.pageY;
    }
    else if (typeof e.originalEvent.clientY !== 'undefined') {
        pageY = e.originalEvent.clientY;
    }
    else if (e.originalEvent.touches && e.originalEvent.touches[0] && typeof e.originalEvent.touches[0].clientY !== 'undefined') {
        pageY = e.originalEvent.touches[0].clientY;
    }
    else if(e.currentPoint && typeof e.currentPoint.y !== 'undefined') {
        pageY = e.currentPoint.y;
    }
    return pageY - rangeY;
};

我不太确定哪个函数有问题需要我修改。有什么想法吗？

Answer 1

您需要更改 2 行代码。

在 'Plugin.prototype.handleDown' 方法中，您需要将 this.setPosition(posY - this.grabY); 行更改为 this .setPosition(this.maxHandleY - (posY - this.grabY));

在 'Plugin.prototype.handleMove' 方法中，您需要将 this.setPosition(posY - this.grabY); 行更改为 this .setPosition(this.maxHandleY - (posY - this.grabY));

演示:http://jsfiddle.net/g7yhLkt1/5/