jquery slider vertical and value

by tea4two

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 myself">
<input type="range" min="0" max="100" value="25" step="5" sliderOrientation="vertical" />
</div>

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

CSS

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

JavaScript

function anotherfunction() {
    alert('another function is fired');
}
$(document).ready(function() {
    //do something
    $('.container').change(function() {
        if ($(this).children('input').val()==50) {
            //値が50の時
            $('.changeThis').addClass('changed');
            $('.changed').removeClass('changeThis');
            $('.myself').addClass('ohYes');
            //alert("at 50 and changeThis now have [" + $('.changed').attr("class") + "] classes");
            
        } else if($(this).children('input').val()==100) {
            // 値が100の時
            $('.ui-slider-vertical').css("display","none");
            $('.container input').remove();//完全削除して、2度以上Functionの実行を無効にする。
            anotherfunction();
        }
    });
});