Slider sortable list checked

by ostapische

HTML

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<div id="amountDivId">0</div>
<div id="sliderDivId" style="width: 100px;"></div>
<ul id="listUlId">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

CSS

.checked {
    color: red;
}

JavaScript

function setAmount(value) {
    $("#amountDivId").html(value);
    var value10 = Math.floor(value / 10);
    if (value10 > 0) {
        $("#listUlId li:lt(" + value10 + ")").addClass("checked");
        $("#listUlId li:gt(" + (value10 - 1) + ")").removeClass("checked");
    } else {
        $("#listUlId li:eq(0)").removeClass("checked");
    }
}
$(function(){
    $("#sliderDivId").slider({
        min: 0,
        max: 30,
        step: 1,
        value: 0,
        slide: function(event, ui){
            setAmount(ui.value);
        }
    });
    $("#listUlId").sortable({
        update: function( event, ui ) {
            setAmount($("#sliderDivId").slider("value"));
        }
    });
    $("#listUlId").disableSelection();
});