反转水平 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 开始。那么第一个和最后一个值的点击就有问题了。如果您在第一个元素之前稍稍单击（或在最后一个元素之后），selection 会落在相反的值上。所以，如果我先点击第一个元素之前，select 最后一个。反之亦然。

Answer 1

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

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

希望对您有所帮助。

这里正在工作plunker

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

Invert horizontal AngularJS Slider Custom Scale

javascript

jquery

slider

angularjs

angularjs-slider