如何在rangeslider.js（IE8）中动态更改最小值和最大值

debugcn 发表于 Dev

RBH

我有一个页面，其中包含三个使用rangeslider.js（andreruffert.github.io/rangeslider.js）的滑块。

我在IE8中动态更改滑块的最小值和最大值时遇到麻烦。在IE9 +和Webkit中，当我在输入标签中动态设置min和max属性时，它可以正常工作。

在IE8中，它只会忽略页面加载后我通过脚本设置的任何最小值和最大值。

任何想法将不胜感激。

其他缓冲

Rangeslider.js有一个update方法，如果元素的任何属性发生更改，都可以调用该方法。

$element.rangeslider('update', true);

var $document = $(document);
var $element = $('input[type=range]');
var $min = $('input[name="min"]');
var $max = $('input[name="max"]');
var $step = $('input[name="step"]');
var output = document.querySelector('output');

// Set initial output value
output.innerHTML = $element[0].value;

// Update output value
$document.on('input', 'input[type="range"]', function() {
  output.innerHTML = this.value;
});

// Initialize rangeslider.js
$element.rangeslider({
  polyfill: false
});

// Example functionality to demonstrate programmatic attribute changes
$document.on('click', '#js-example-change-attributes', function(e) {
  var attributes = {
    min: $min[0].value,
    max: $max[0].value,
    step: $step[0].value
  };
  // update attributes
  $element.attr(attributes);

  // pass updated attributes to rangeslider.js
  $element.rangeslider('update', true);
});

body {
  font-family: sans-serif;
  padding: 30px;
  margin: 0 auto;
  max-width: 400px;
}
h3 {
  color: rgba(0,0,0, .4);
}
output {
  display: block;
  text-align: center;
}

<link href="http://andreruffert.github.io/rangeslider.js/assets/rangeslider.js/dist/rangeslider.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://andreruffert.github.io/rangeslider.js/assets/rangeslider.js/dist/rangeslider.min.js"></script>

<h2>rangeslider.js</h2>
<h3>Programmatic attribute changes</h3>
<br>
<input type="range" min="0" max="100">
<br>
<output></output>
<br>
<label>
  <input type="number" name="min" value="10"> <code>min</code>
</label>
<br>
<label>
  <input type="number" name="max" value="100"> <code>max</code>
</label>
<br>
<label>
  <input type="number" name="step" value="5"> <code>step</code>
</label>
<br>
<br>
<button id="js-example-change-attributes">Change attributes</button>