以指數方式更改HTML滑塊

Question

我正在嘗試通過每張幻燈片的10的冪來更改滑塊步長，但是它無法正常工作。 我不確定是否應該使用stepUp()或直接更改step的值。

這就是我以10的冪遞增的方式：

var increment = (function(n) {
  return function() {
    n = n + 2;
    var x = Math.pow(10, n);
    console.log(x +" " + "Math.Pow thingy");
    return x;
  }

這是我嘗試將其作為參數傳遞的方法：

document.getElementById("something").stepUp(increment);

如果有人想知道，這是我正在使用的stepUp（） 。

另外，這是我的滑塊的小提琴： Slider Fiddle＃1

我希望我的滑板步驟更改為10 ， 100 ， 1000 ， 10000每張幻燈片。

Answer 1

可以肯定，您不能真正按照自己的方式進行操作，您需要自己進行某種計算。 步驟僅適用於常數

 var input = document.getElementById("input") var output = document.getElementById("output") function getValue() { let power = input.value let result = Math.pow(10, +power) output.value = result } 

 <input id="input" type="range" min="1" max="10" value="1" oninput="getValue()" /> <input type="text" id="output" value="10"/> 

Answer 2

這是做到這一點的一種方法

 // Get DOM refs for the required elements var slider = document.getElementById('myRange'); var res = document.getElementById('res'); var inc = document.getElementById('inc'); // Initialize Div to show starting value res.innerHTML = slider.value; // Register on change handler to update div value if slider is changed slider.onchange = function(){ res.innerHTML = this.value; } // Register a click handler inside a closure to increment exponentially inc.onclick = (function(){ // Initial increment value var n = 1; // Return a click handler function which has access to the variable n because of the closure return function(){ // Button is clicked, increment by n slider.stepUp(n); // Update div value for display res.innerHTML = slider.value; // Multilply n by 10 so the next time the increment is 10x n *= 10; } })() 

 <input type="range" id="myRange" value="1000" min="1" max="1000"> <div id="res"></div> <button id="inc">Increment</button> 

Answer 3

<input type="range" />的自然行為是線性的，因此您必須設計自然值到所需值的所需映射。

您正在尋找的是具有所謂的對數線性作用的滑塊，這樣可以將滑塊設置為產生最終所需值的對數。

<input id="something" name="something" type="range" min="2" max="5" value="3" step="1" class="form-control slider" />

在這里，評論設置是

• min =“ 2” -log-base10（100）== 2
• max =“ 5” -log-base10（100000）== 5
• 值=“ 3” -log-base10（1000）== 3

然后，要返回到您實際想要的值，您必須執行反對數或Math.pow(10, x) 。

var slider = document.getElementById('something');
var output = document.getElementById('demo');
slider.onchange = function() {
    output.innerHTML = Math.pow(10, this.value);
}
slider.onchange(); // set output for the initial value

DEMO

編輯：

<input type="range" />滑塊元素的行為不可避免地是線性的。 在目前的發展狀態下，HTML別無其他。

為了提交您實際想要的值，您可以將滑塊字段用作基礎隱藏字段的UI，該字段的值被保留以保存線性元素值的變換。 只要您可以從事業務，就可以編寫代碼來執行轉換。 在這種情況下，很簡單-反對數。

因此，您的HTML可能是這樣的：

<input id="something-ui" type="range" min="2" max="5" value="3" step="1" class="form-control slider" />
<input id="something-hidden" name="something" type="hidden" />

和相應的javascript：

var slider = document.getElementById('something-ui');
var hidden = document.getElementById('something-hidden');
var output = document.getElementById('demo');
slider.oninput = function() { // or onChange
    output.innerHTML = hidden.value = Math.pow(10, this.value); // antilogarithm
}
slider.oninput(); // set hidden value and output for the initial value  

因此，現在，UI控件的行為仍然是線性的，但是（通過demo ）具有指數形式的外觀和提交行為（ something-hidden的something-hidden ）。