コントロールの横に現在の値を表示するスライダーを取得しようとしています。このチュートリアルhttp://www.ryancoughlin.com/demos/interactive-slider/は、いかに簡単で痛みを伴わないかを説明しています。
現在、3つの連続するスライダーを設定しようとしていますが、IEは、3つのコントロールすべてのオプションをデフォルト値(0から100、ステップ1、アニメーションfalse ...)に設定しています。ただし、FFとChromeでは正常に動作します。
私は何が欠けていますか?ありがとうございました。
コードは次のとおりです。
$('#slider-alpha').slider({
range : false,
value : 5,
step: 1,
animate: "true",
min: 1,
max : 10,
});
$('#slider-gamma').slider({
range : false,
value : 50,
step: 10,
animate: "true",
min: 1,
max : 200,
});
$('#slider-beta').slider({
range : false,
values : 50,
step: 10,
animate: "true",
min: 1,
max : 300,
});
<script>
$(function() {
//alpha
var slide_int_alpha = null;
var slide_int_beta = null;
var slide_int_gamma = null;
function update_slider_alpha(){
var value = $('#slider-alpha').slider('option', 'value');
$('#alpha-value').text('No. of alpha: '+value);
$('#alpha-value').fadeIn();
}
function update_slider_beta(){
var valuet = $('#slider-beta').slider('option', 'value');
$('#beta-value').text('No. of beta: '+valuet);
$('#beta-value').fadeIn();
}
function update_slider_gamma(){
var valuep = $('#slider-gamma').slider('option', 'value');
$('#gamma-value').text('No. of gamma: '+valuep);
$('#gamma-value').fadeIn();
}
$( "#slider-alpha" ).slider({
start: function(event, ui){
$('#alpha-value').empty();
slide_int_alpha = setInterval(update_slider_alpha, 10);
},
slide: function(event, ui)
{
setTimeout(update_slider_alpha, 10);
},
stop: function(event, ui){
clearInterval(slide_int_alpha);
slide_int_alpha = null;
}
});
$( "#slider-beta" ).slider({
start: function(event, ui){
$('#beta-value').empty();
slide_int_beta = setInterval(update_slider_beta, 10);
},
slide: function(event, ui)
{
setTimeout(update_slider_beta, 10);
},
stop: function(event, ui){
clearInterval(slide_int_beta);
slide_int_beta = null;
}
});
$( "#slider-gamma" ).slider({
start: function(event, ui){
$('#gamma-value').empty();
slide_int_gamma = setInterval(update_slider_gamma, 10);
},
slide: function(event, ui)
{
setTimeout(update_slider_gamma, 10);
},
stop: function(event, ui){
clearInterval(slide_int_gamma);
slide_int_gamma = null;
}
});
});
</script>
<div id="alpha-value">No. of alpha: 5</div>
<div id="slider-alpha" style="width: 90%;text-align: center;"></div>
<br />
<div id="beta-value">No. of beta: 20</div>
<div id="slider-beta" style="width: 90%;text-align: center;"></div>
<br />
<div id="gamma-value">No. of gamma: 20</div>
<div id="slider-gamma" style="width: 90%;text-align: center;"></div>
<br />