SO - 20798785

by dhavaljani

HTML

<div id="slider" align="center" style="width:50%;margin-left:20%;">ds</div>
<div id="1" class="res1" style="margin:10px auto">sds</div>

CSS

.res1 {
    height: 20px;
    background-color: red;
}
.res2 {
    height: 20px;
    background-color: green;
}
.res3 {
    height: 20px;
    background-color: blue;
}

JavaScript

$(function () {
    var classes = {
        0: 'res1',
        25: 'res2',
        50: 'res3'
    }
    $("#slider").slider({
        animate: "fast",
        value: 0,
        min: 0,
        max: 50,
        step: 25,
        slide: function (event, ui) {
            $("#1").removeClass().addClass(classes[ui.value])
        }
    });
});