Javascript: Non Linear Range Slider

Question

I have built this range slider, but would like to make it behave differently. I want to know if it is possible to make the value of the slider handle be 1,000 when it gets to the center of the slider, and when at the right end it should be 10,000.

Below is the code I have so far:

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

The below image shows an illustration of what I am trying to achieve.

I'd suggest looking at https://codepen.io/martinAnsty/pen/BCotE. — Lorddirt, Jul 16 '18 at 07:49

score 8 · Accepted Answer · answered Jul 15 '18 at 10:51

8

You just have to find an exponential function on your x-axis (from 0 to 100) that has the required output on y-axis (from 100 to 10000).

Then, you adjust your input for your x values, and calculate the y wherever you use the output.

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>

answered Jul 15 '18 at 10:51

Jordi Nebot

3,355
3
27
56

This is beautiful – George Jul 15 '18 at 11:00
This is actually perfect, in this case the 50% mark maps perfectly to the value we desire, what happens when it doesn't map exactly? – George Jul 15 '18 at 11:54
To rephrase the question, I have an input box in mine, which should allow the user manually enter the value of the slider, I was able to get the formula for the reverse operation, but there are certain values it can't accept because the formula is not linear – George Jul 15 '18 at 13:42
If I understand you, you have an input box where the user can enter a value (an output value from 100 to 10000) and you want to move the slide to the corresponding input. In that case, you should calculate the inverse of your exponential function. – Jordi Nebot Jul 15 '18 at 16:09

Hassan Sadeghi · Answer 2 · 2018-07-15T12:59:01.207

1

You need exponential function specious. Reading my answer is not necessary.

Please read my comment below your question. This answer will be complete beside it.

tip: in this sample we have a linear func with two parts. you can change it as you want.

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

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

now in your event:

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

now you can replace y with any function (exponential function or etc...).

edited Jul 15 '18 at 12:59

answered Jul 15 '18 at 09:58

Hassan Sadeghi

1,316
2
8
14

Thank you Hassan, but I don't think I quite understand – George Jul 15 '18 at 10:04
you'r welcome; check update please. i hope this help. this answer is base on a simple function that combines two linear funcs. – Hassan Sadeghi Jul 15 '18 at 10:59

Javascript: Non Linear Range Slider

2 Answers2