Javascript：非线性范围滑块

Question

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

下面是我目前的代码：

$('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>

下图展示了我正在努力实现的目标。

Answer 1

你需要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。

Answer 2

您只需 find an exponential function 在 x 轴（从 0 到 100）上具有 y 轴[所需的输出=28=]（从 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>

Javascript：非线性范围滑块

Javascript: Non Linear Range Slider

javascript

jquery

html

css

rangeslider