•  21-08-2019
  •  | 
  •  

質問

私はスライダの値0から100です。

たいそして電子メールと電話によってさらに100 10,000,000.

いくつかの機能に在のネットが、それらはすべてC++.I必要となります。

そのアイデア?

役に立ちましたか？

解決

あなたはこのような関数を使用することができます：

function logslider(position) {
  // position will be between 0 and 100
  var minp = 0;
  var maxp = 100;

  // The result should be between 100 an 10000000
  var minv = Math.log(100);
  var maxv = Math.log(10000000);

  // calculate adjustment factor
  var scale = (maxv-minv) / (maxp-minp);

  return Math.exp(minv + scale*(position-minp));
}

得られた値は、対数スケールに一致

js> logslider(0);
100.00000000000004
js> logslider(10);
316.22776601683825
js> logslider(20);
1000.0000000000007
js> logslider(40);
10000.00000000001
js> logslider(60);
100000.0000000002
js> logslider(100);
10000000.000000006

の逆関数は、minp、maxp、minv、maxvとscaleについて同じ定義を、このような値からスライダ位置を計算するであろう 

function logposition(value) {
   // set minv, ... like above
   // ...
   return (Math.log(value)-minv) / scale + minp;
}


すべて一緒に、クラスに包まれ、機能コードスニペットとして、それは次のようになります：

// Generic class:

function LogSlider(options) {
   options = options || {};
   this.minpos = options.minpos || 0;
   this.maxpos = options.maxpos || 100;
   this.minlval = Math.log(options.minval || 1);
   this.maxlval = Math.log(options.maxval || 100000);

   this.scale = (this.maxlval - this.minlval) / (this.maxpos - this.minpos);
}

LogSlider.prototype = {
   // Calculate value from a slider position
   value: function(position) {
      return Math.exp((position - this.minpos) * this.scale + this.minlval);
   },
   // Calculate slider position from a value
   position: function(value) {
      return this.minpos + (Math.log(value) - this.minlval) / this.scale;
   }
};


// Usage:

var logsl = new LogSlider({maxpos: 20, minval: 100, maxval: 10000000});

$('#slider').on('change', function() {
   var val = logsl.value(+$(this).val());
   $('#value').val(val.toFixed(0));
});

$('#value').on('keyup', function() {
   var pos = logsl.position(+$(this).val());
   $('#slider').val(pos);
});

$('#value').val("1000").trigger("keyup");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Input value or use slider:
<input id="value" />
<input id="slider" type="range" min="0" max="20" />

他のヒント

あなたが望む分布を得るために、私はあなたがこの数式を使用することができると思います：

var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));

ここでは、あなたの0-100スライダーのために買ってあげるの値を出力します自己完結型のページ、その式を介してそれらを通過したのです 

<html><body><script>
for (var i = 0; i <= 100; i++) {
    var value = Math.floor(-900 + 1000*Math.exp(i/10.857255959));
    document.write(value + "<br>");
}
</script></body></html>

番号は100から必要なディストリビューションであることを私の数学的に錆び目に見えるもので10,000,000に行きます。 8 - ）

は非常に疑問に答えるが、興味がある人のために、最後の行をマッピング逆ではありません。

return (Math.log(value)-minv)/scale + min;

ちょうど文書へ。

値は> 0でなければなりません。

探していました 対数スライダーのための角度 ることができていないのを見つしかこの答え

って作成される角度の2+デモ版ソフトウェアとオンラインで角6): 作業のデモ

感謝 @sth, は、スニペット:

function LogSlider(options) {
   options = options || {};
   this.minpos = options.minpos || 0;
   this.maxpos = options.maxpos || 100;
   this.minlval = Math.log(options.minval || 1);
   this.maxlval = Math.log(options.maxval || 100000);

   this.scale = (this.maxlval - this.minlval) / (this.maxpos - this.minpos);
}

LogSlider.prototype = {
   // Calculate value from a slider position
   value: function(position) {
      return Math.exp((position - this.minpos) * this.scale + this.minlval);
   },
   // Calculate slider position from a value
   position: function(value) {
      return this.minpos + (Math.log(value) - this.minlval) / this.scale;
   }
};

真の対数スライダーの問題点は、スライダ上の複数のポイントは、多くの場合、重複した値になりますローエンドである。

純粋にUIの観点から、それはまた、ユーザー入力のための非常に直感的な出力を提供していません。

私は、より良いオプションは、「ステップ」でも配布を使う変換することだと思います。

" ここに画像の説明を入力する

言い換えれば、我々は（：1、10、100、1000年EX）を使用したい単位のシリーズを指定します。その後、我々は定義増分の数に基づいて等分スライダーを分割しました。我々は別のセクションをスライドされると、スライダー出力は、それぞれの増分だけ増加します。

WORKING DEMOする

上記の例では、我々はmin、max＆intervals配列を定義します。

<ExpoStepSlider
  intervals={[1, 2, 5, 10, 100, 1000]}
  min={1}
  max={50000}
/>

私たちは、それが適切に私たちの定義された間隔分布に基づいて最小から最大へ行くように、私たちのスライダーを持っている必要があります離散値の数を見つける必要があります。

let sliderPoints = Math.ceil(
  (max - min) / 
  intervals.reduce((total, interval) => total + interval / intervals.length, 0)
);

この場合535で。

の の注意ののの：あなたのスライダーポイントはスライダーの画素数を超えてはなりません。の

最後に、私たちは、上記のアルゴリズムを使用して私たちの出力を変換します。出力は、常に現在のステップ間隔のラウンドになるようにコード例はまた、いくつかの作業を行います。

所属していません StackOverflow
scroll top