jquery slider vertical

by Berker Yüceer

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.css">
<link rel="stylesheet" href="http://www.elmundio.net/projects/verticalSlider/verticalSlider.css">
<script src="http://code.jquery.com/mobile/1.2.0-alpha.1/jquery.mobile-1.2.0-alpha.1.min.js"></script>
<script src="http://www.elmundio.net/projects/verticalSlider/verticalSlider.js"></script>
<p>want to change the class name of div "changeThis" to "changed" at value 50. <br />and fire another function at value 100.</p>
<div class="container">
<input type="range" min="0" max="100" value="25" step="5" sliderOrientation="vertical"  />
</div>

<div class="changeThis"></div>

CSS

.container {
    background: #f0f0f0;
    
}
.changeThis {
    height: 50px;
    width: 50px;
    background-color: purple;
}
.changed { background-color: yellow; }

JavaScript

function anotherfunction() {
    alert('another function is fired');
}
$(document).ready(function() {
    //do something
    $('.container').change(function() {
        if ($(this).children('input').val()==50) {
            $('.changeThis').addClass('changed');
            $('.changed').removeClass('changeThis');
            alert("at 50 and changeThis now have [" + $('.changed').attr("class") + "] classes");
        } else if($(this).children('input').val()==100) {
            // another function here
            anotherfunction();
        }
    });
});