Invert horizo​​ntal AngularJSスライダーカスタムスケール

Question

私はこれを使用していますAngularJS Slider、水平なものです。 ポイントを別の距離で割った例を取った。その例は、遠くから始まり、小さな距離で終わります。

私がやりたかったのは、番号付けを維持しながらスケールを逆転させることです。 これは私のコードです：

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

は二つの問題があります：JSFIDDLE

あなたが見ることができるように、私は機能customValueToPositionを変え数字が反転しています。私は5を開始する代わりに0から離したいと思っています。 最初の値と最後の値のクリックに問題があります。最初の要素の少し前（または最後の項目の直後）をクリックすると、選択は反対の値になります。だから、最初の要素の前にちょうどクリックすれば、最後の要素を選択してください。およびその逆。

Answer 1

EDIT：これはあなたが探しているものだと思います。古いものは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