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

希望它有所帮助。

这是有效的plunker

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

1 个答案: