如何在rangeslider.js(IE8)中动态更改最小值和最大值
How to dynamically change min and max values in rangeslider.js (IE8)
我有一个页面,其中有三个滑块使用rangeslider.js(andrefrufert.github.io/rangeslider.js)。
我在IE8中动态更改滑块的最小值和最大值时遇到问题。在IE9+和webkit中,当我在输入标记中动态设置min和max属性时,它可以很好地工作。
在IE8中,它只是忽略我在加载页面后通过scripps设置的任何最小值和最大值。
任何想法都将不胜感激。
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>
相关文章:
- Html5输入属性的默认值,如最小值、最大值、大小等
- Angular JS在一行中查找最小值
- 识别滑块范围的最小值和最大值
- 求除零以外的最小值
- Javascript-如何使用函数找到数组的最小值
- 我有一个字段计算,如果结果低于 60,则需要显示最小值
- 如何在拖动后获得图表的最小值和最大值放大高图表
- AngularJs:在数字输入字段中设置验证的条件最小值和最大值
- HTML5范围滑块最小值和最大值
- 如何仅在存在最小值和最大值时才显示错误消息
- 在 JavaScript 事件中添加最小值和最大值
- 从 JavaScript 中的数组中获取最大值和最小值
- 获取整数对象属性名称的最小值和最大值
- 高图表 - 在缩放重置中设置最大值和最小值
- AngularJS Ion.RangeSlider 不会在更改特定按钮时动态更新最小值和最大值
- 如何在rangeslider.js(IE8)中动态更改最小值和最大值
- 确定动态最小值/最大值的数字百分比
- 动态更改标签以显示y轴最小值和最大值
- Angular ui-slider -动态最小/最大值
- 生成具有动态最小值和最大值的动态jQuery Slider