Change text and styling of a form control when a slider value changes Having a hard time to achieve what I'm looking for. I was thinking of using arrays but don't know where to start. Code below is what I want to shorten to get rid of multiple if statement using jQuery.

$("input#communication").on("slide", function(slideEvt) {
    if(slideEvt.value == 1) {
        $('#slider-val1').css('color', '#D0011B');
        $('.slider-label').not('#slider-val1').css('color', '#ccc');
        $('.slider-handle').css({
            'border': '5px solid #fff',
            'box-shadow': '0 0 0 2px #D0011B'
         })
        $("#desc").text('Amir is a terrible communicator.');
    }

    if(slideEvt.value == 2) {
        $('#slider-val2').css('color', '#D0011B');
        $('.slider-label').not('#slider-val2').css('color', '#ccc');
        $("#desc").text('Amir struggles, needs a lot of help to improve communication skills.');
    }

    if(slideEvt.value == 3) {
        $('.slider-handle').css({
            'border': '5px solid #fff',
            'box-shadow': '0 0 0 2px #D0011B'
        })
        $('.slider-handle').css('background', '#D0011B');
        $('.slider-selection').css('background', '#D0011B');
        $('#slider-val3').css('color', '#D0011B');
        $('.slider-label').not('#slider-val3').css('color', '#ccc');
        $("#desc").text('Amir needs some help to improve communication skills.');
    }

    if(slideEvt.value == 4) {
        $('.slider-handle').css('background', '#F47621');
        $('.slider-selection').css('background', '#F47621');
        $('#slider-val4').css('color', '#F47621');
        $('.slider-handle').css({
            'border': '5px solid #fff',
            'box-shadow': '0 0 0 2px #F47621'
        })
        $('.slider-label').not('#slider-val4').css('color', '#ccc');
        $("#desc").text('Amir has below average communication skills.');
    }

    if(slideEvt.value == 5) {
        $('#slider-val5').css('color', '#F47621');
        $('.slider-label').not('#slider-val5').css('color', '#ccc');
        $("#desc").text('Amir has adequate communications skills.');
    }
});


The code above use to change the $('#desc') text and CSS every time the slider is slide. Now, I'm looking for a good way on how to shorten thisif else statements.
You are duplicating a lot of code here. You said you wanted an array, so make an array containing all the values that change and then use the slideEvt.value to recall the values from the array at the correct index..

Something like this maybe.. no if() statements required (at least not for the slideEvt.value):

$("input#communication").on("slide", function(slideEvt) {
    var slideEvtVals = [
      {color: '#D0011B', css: {'border': '5px solid #fff', 'box-shadow': '0 0 0 2px #D0011B'}, text: 'Amir is a terrible communicator.'}
      {color: '#D0011B', text: 'Amir struggles, needs a lot of help to improve communication skills.'}
      {color: '#D0011B', css: {'border': '5px solid #fff', 'box-shadow': '0 0 0 2px #D0011B'}, text: 'Amir needs some help to improve communication skills.', handleBG: '#D0011B', selBg: '#D0011B'}
      {color: '#F47621', css: {'border': '5px solid #fff', 'box-shadow': '0 0 0 2px #F47621'}, text: 'Amir has below average communication skills.', handleBG: '#F47621', selBg: '#F47621'}
      {color: '#F47621', text: 'Amir has adequate communications skills.'}
    ];

    var index = slideEvt.value-1;
    $('#slider-val'+slideEvt.value).css('color', slideEvtVals[index].color);
    $('.slider-label').not('#slider-val'+slideEvt.value).css('color', '#ccc');
    if(slideEvtVals[index].css) $('.slider-handle').css(slideEvtVals[index].css);
    $("#desc").text(slideEvtVals[index].text);
    $("#desc").text(slideEvtVals[index].text);
    if(slideEvtVals[index].handleBG) $('.slider-handle').css('background', slideEvtVals[index].handleBG);
    if(slideEvtVals[index].selBg) $('.slider-selection').css('background', slideEvtVals[index].selBg);
});