javascript - 反转水平 AngularJS 滑块自定义比例

Question

我正在使用这个AngularJS Slider，水平的。我举了一个例子，将点除以不同的距离。该示例从很远的距离开始，以很小的距离结束：

我想做的是反转比例保持编号。这是我的代码：JSFIDDLE

如您所见，我更改了功能customValueToPosition：

customValueToPosition: function(val, minVal, maxVal) {
  val = Math.sqrt(val);
  minVal = Math.sqrt(minVal);
  maxVal = Math.sqrt(maxVal);
  var range = minVal - maxVal;
  return (val - maxVal) / range;      
}

有两个问题： 数字是倒置的。我想从0离开而不是从5开始。那么第一个和最后一个值的点击有问题。如果您在第一个元素之前（或最后一项之后）稍稍单击，则选择将落在相反的值上。因此，如果我只是在第一个元素之前单击，请选择最后一个。反之亦然。

Answer 1

编辑：我认为这就是你要找的。旧的是 x^2 比例，所以为了使它看起来像这样，我们需要更改两个函数，并且在 customPositionToValue 中返回平方根而不是 2 的幂，在 customValueToPosition 中我们需要使用 2 的幂来计算范围并返回描述点位置的百分比。

app.controller('MainCtrl', function ($scope, $rootScope, $timeout, $modal) {
        $scope.minSlider = {
            value: 2
        };
        $scope.slider = {
            options: {
            floor: 0,
            ceil: 5,
            step: 1,
            showTicksValues: true,
            customValueToPosition: function(val, minVal, maxVal) {
                val = Math.pow(val,2)
                maxVal = Math.pow(maxVal, 2)
                minVal = Math.pow(minVal, 2)
                var range = maxVal - minVal
                return (val - minVal) / range
            },
            customPositionToValue: function(percent, minVal, maxVal) {
                minVal = Math.pow(minVal,2);
                maxVal = Math.pow(maxVal,2);
                var value = percent * (maxVal - minVal) + minVal;
                return Math.sqrt(value)
            }
            }
        };
});

希望能帮助到你。

这是工作的笨蛋