Question

我正尝试在每张幻灯片上以app.get("/liveDataRequest", function(req, res){ console.log('Debug 10'); getLiveData(function(data){ res.status(200).send(data); //res.json(data); //i get same error when i use this too console.log("in handler", data); }); console.log('Debug 20'); });的力量更改滑块步骤，但它无法正常工作。我不确定是否应该使用10或直接更改步骤的值。

这是我增加stepUp()：

的力量的方法

以下是我尝试将其作为参数传递的方法：

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

如果有人想知道，这是我正在使用的stepUp()。

此外，这是我的滑块的小提琴：Slider Fiddle #1

我希望我的滑块可以逐步更改为每张幻灯片上的document.getElementById("something").stepUp(increment);，10，100，1000。

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

这是一种方法

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

<input type="range" />的自然行为是线性的，因此您必须设计所需的自然值映射到所需的值。

您正在寻找的是带有所谓 log-linear 动作的滑块，以便设置滑块以产生您最终想要的值的对数;

<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
value =“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），指数呈现。

以指数方式更改html滑块步骤

3 个答案: