CODEWITHSUNDEEP
javascriptjqueryhtmlcssrangeslider
George
George

Reputation: 3943

Javascript: Non Linear Range Slider

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.

enter image description here

Upvotes: 3

Views: 4238

Answers (2)

Hassan Sadeghi
Hassan Sadeghi

Reputation: 1326

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...).

Upvotes: 1

Jordi Nebot
Jordi Nebot

Reputation: 3401

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>

Upvotes: 8

Related Questions