Question

I’ve been trying to get a slider to display its current value next to the control. This tutorial http://www.ryancoughlin.com/demos/interactive-slider/ explains how easy and painlessly.

Now I am trying to set 3 consecutive sliders and works fine but IE is setting options to default values ( 0 to 100, step 1, animate false…) for all three controls. Works fine in FF and Chrome though.

What am I missing? Thank you.

Heres the code:

        $('#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 />      

Answer 1

While Firefox and Chrome handle them gracefully, Internet Explorer doesn’t like trailing commas in objects, argument lists, etc.

$('#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
    });