jquery - Javascript: Non Linear Range Slider - Stack Overflow

admin管理员组

文章数量:1355540

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/ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet"/>
<script src=".1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare/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>

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./ajax/libs/rangeslider.js/2.3.2/rangeslider.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare./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.

• javascript
• jquery
• html
• css
• rangeslider

Share Improve this question Follow edited Jul 15, 2018 at 9:38 George asked Jul 15, 2018 at 9:26 GeorgeGeorge 3,95399 gold badges5656 silver badges9090 bronze badges 1

• I'd suggest looking at codepen.io/martinAnsty/pen/BCotE. – Lorddirt Commented Jul 16, 2018 at 7:49

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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>

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

Please read my ment below your question. This answer will be plete 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...).

本文标签： jqueryJavascript Non Linear Range SliderStack Overflow