blocks|key|1561904|text|为了获得你想要的发行版，我认为你可以使用这个公式：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1561905|var+value+=+Math.floor(-900+%2B+1000*Math.exp(i/10.857255959));|code-block|syntax|javascript|1561906|这是一个自包含的页面，它将打印您将从0-100滑块中获得的值，并将它们传递给该公式：|1561907|<html><body><script>
for+(var+i+=+0;+i+<=+100;+i%2B%2B)+{
++++var+value+=+Math.floor(-900+%2B+1000*Math.exp(i/10.857255959));
++++document.write(value+%2B+"<br>");
}
</script></body></html>|1561908|数字从100到10,000,000，在我数学上生锈的眼睛里看起来就是你想要的分布。8-)|1561909|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>To get the distribution you want, I think you can use this formula:</p>

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

<p>Here's a self-contained page that will print the values you'll get for your 0-100 slider, having passed them through that formula:</p>

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

<p>The numbers go from 100 to 10,000,000 in what looks to my mathematically-rusty eye to be the distribution you want.  8-)</p>


blocks|key|1346336|text|您可以使用如下函数：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1346337|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+%2B+scale*(position-minp));
}|code-block|syntax|javascript|1346338|结果值与对数刻度匹配：|1346339|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|1346340|reverse函数将使用与minp、maxp、minv、maxv和scale相同的定义，从如下所示的值计算滑块位置：|offset|length|style|CODE|1346341|function+logposition(value)+{
+++//+set+minv,+...+like+above
+++//+...
+++return+(Math.log(value)-minv)+/+scale+%2B+minp;
}|1346342|总而言之，包装在一个类中并作为一个功能代码片段，它将看起来如下所示：|1346343|//+Generic+class:

function+LogSlider(options)+{
+++options+=+options+%7C%7C+{};
+++this.minpos+=+options.minpos+%7C%7C+0;
+++this.maxpos+=+options.maxpos+%7C%7C+100;
+++this.minlval+=+Math.log(options.minval+%7C%7C+1);
+++this.maxlval+=+Math.log(options.maxval+%7C%7C+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+%2B+this.minlval);
+++},
+++//+Calculate+slider+position+from+a+value
+++position:+function(value)+{
++++++return+this.minpos+%2B+(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(%2B$(this).val());
+++$('#value').val(val.toFixed(0));
});

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

$('#value').val("1000").trigger("keyup");|1346344|<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"+/>|1346345|​|1346346|entityMap^0|0|0|0|0|D|4|I|4|N|4|S|4|X|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|15|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|16|8|@$M|17|N|18|O|P]|$M|19|N|1A|O|P]|$M|1B|N|1C|O|P]|$M|1D|N|1E|O|P]|$M|1F|N|1G|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|D|7|1H|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|1I|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1J|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|Y|3|Z|5|6|7|1L|8|@]|9|@]|A|$]]|$1|10|3|-4|5|6|7|1M|8|@]|9|@]|A|$]]]|11|$]]

<p>You can use a function like this:</p>

<pre><code>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));
}
</code></pre>

<p>The resulting values match a logarithmic scale:</p>

<pre><code>js&gt; logslider(0);
100.00000000000004
js&gt; logslider(10);
316.22776601683825
js&gt; logslider(20);
1000.0000000000007
js&gt; logslider(40);
10000.00000000001
js&gt; logslider(60);
100000.0000000002
js&gt; logslider(100);
10000000.000000006
</code></pre>

<p>The reverse function would, with the same definitions for <code>minp</code>, <code>maxp</code>, <code>minv</code>, <code>maxv</code> and <code>scale</code>, calculate a slider position from a value like this:</p>

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

<p><br></p>

<p>All together, wrapped in a class and as a functional code snippet, it would look like this:<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// 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");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

Input value or use slider:
&lt;input id="value" /&gt;
&lt;input id="slider" type="range" min="0" max="20" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1346393|text|没有完全回答这个问题，但对于感兴趣的人来说，最后一行的反向映射是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1346394|return+(Math.log(value)-minv)/scale+%2B+min;|code-block|syntax|javascript|1346395|只是为了记录。|1346396|注意:该值必须大于0。|1346397|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Not quite answering the question, but for people interested, the reverse maping the last line is</p>

<pre><code>return (Math.log(value)-minv)/scale + min;
</code></pre>

<p>just to document.</p>

<p>NOTE the value must be > 0.</p>


<p>I have a slider with values ranging from 0 to 100.</p>

<p>I want to map them to a range from 100 to 10,000,000.</p>

<p>I've seen some functions scattered around the net but they're all in C++. 
I need it in Javascript.</p>

<p>Any ideas?</p>


Logarithmic slider

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有一个值从0到100的滑块。我希望将它们映射到从100到10,000,000的范围。我见过一些分散在网络上的函数，但它们都是在C++中实现的。我需要它在Javascript中。有什么想法吗？

问对数滑块
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对数滑块EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问对数滑块
EN