Javascript：非线性范围滑块

Posted 2023-02-18

【中文标题】Javascript：非线性范围滑块

【英文标题】：Javascript: Non Linear Range Slider

【发布时间】：2018-12-23 03:06:39

【问题描述】：

我已经构建了这个范围滑块，但想让它的行为有所不同。我想知道是否可以使滑块手柄的值在到达滑块中心时为1000，而在右端时应为10000。

下面是我目前的代码：

$('input[type="range"]').rangeslider(
    polyfill: false,
    onSlide: function (pos, val) 
      $('input[type="text"]').val(val)
    ,
    onSlideEnd: function(position, value) 
      
      const sliderValue = value;
      
      if (value >= 1000) 
        const upperLimit = Math.ceil(value/100) * 100
        const lowerLimit = Math.floor(value/100) * 100
        
        const upperWeight = Math.abs( upperLimit - value)
        const lowerWeight = Math.abs( value - lowerLimit)
        
        value = upperLimit
        
        if (upperWeight > lowerWeight) 
          value = lowerLimit
        
      
      
      if (value >= 10000) 
        value = 10000
      
      
        $('input[type="range"]').val(value).change()
    ,
);


$('input[type="text"]').on('blur', function (e) 
  $('input[type="range"]').val($(this).val()).change()
)

  
.container 
  width: 80%;
  margin: 10px auto;
  
 


 input[type="text"] 
   margin-top: 50px;
   display: block;
   width: 100%;
   height: 60px;
   border: 1px solid #EBEBEB;
   border-radius: 5px;
   font-size: 25px;
   color: #444;
   padding: 5px  25px;
   outline: none;

<link href="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/rangeslider.js/2.3.2/rangeslider.js"></script>
<div class="container">
  <input
      type="range"
      min="100"            
      max="10000"          
      step="10"           
      value="1000"
  />
  
  <input type="text"/>
</div>

下图展示了我想要实现的目标。

【问题讨论】：

我建议查看codepen.io/martinAnsty/pen/BCotE。

【参考方案1】：

您只需要在 x 轴（从 0 到 100）上find an exponential function，在 y 轴（从 100 到 10000）上具有所需的输出.

然后，根据 x 值调整 input，并在使用输出的任何位置计算 y。

const x = document.getElementById('input');
const y = document.getElementById('output');

const a = 100;
const b = Math.pow(a, 1/a);

function updateOutput(event) 
  y.innerText = Math.floor(a * Math.pow(b, x.value));

updateOutput();
input.addEventListener('mousemove', updateOutput);

<input
  id="input"
  type="range"
  min="0"            
  max="100"    
  value="0"
  step="1"
/>
<div id="output"></div>

【讨论】：

这很漂亮

这实际上是完美的，在这种情况下，50% 标记完美地映射到我们想要的值，如果它没有准确映射会发生什么？

换个说法，我有一个输入框，应该允许用户手动输入滑块的值，我可以得到反向操作的公式，但是有一定的它不能接受的值，因为公式不是线性的

如果我理解你，你有一个输入框，用户可以在其中输入一个值（从 100 到 10000 的输出值），并且你想将幻灯片移动到相应的输入。在这种情况下，您应该计算指数函数的倒数。

【参考方案2】：

你需要 exponential 函数似是而非。没有必要阅读我的答案。

请在您的问题下方阅读我的评论。这个答案将在它旁边完成。

---

提示：在这个示例中，我们有一个包含两个部分的线性函数。你可以随意改变它。

var SliderWidth=1000, perUnit = SliderWidth/2000/*constant*/;

function y(currPos)
    return currPos<=SliderWidth/2?currPos/perUnit:(currPos/perUnit)*10;

现在参加您的活动：

onSlide: function (pos, val) 
    $('input[type="text"]').val(y(val))

现在您可以将 y 替换为任何函数（指数函数等...）。

【讨论】：

谢谢哈桑，但我觉得我不太明白

不客气；请检查更新。我希望这会有所帮助。这个答案基于一个结合了两个线性函数的简单函数。