JQuery UI Slider

Sample code for a JQuery UI slider

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<h1>HTML Slider Test</h1>

<div id="slider1"></div>

<p>Параметр 1: <b id="slider1-value"></b></p>

<div id="slider2"></div>

<p>Параметр 2: <b id="slider2-value"></b></p>
<div class="sli s_1_1 s_1_2">p1:1, p2:1,2</div>
<div class="sli s_1_1 s_1_3">p1:1, p2:1,3</div>
<div class="sli s_1_1 s_1_6">p1:1, p2:1,6</div>
<div class="sli s_2_1 s_2_2 s_2_5">p1:2, p2:1,2,5</div>
<div class="sli s_3_4">p1:3, p2:4</div>

CSS

h1 {
    font-family: Helvetica, Arial;   
    font-weight: bold;
    font-size: 18px;
}

body, p{
    font-family: Helvetica, Arial;
}
.sli{
    border: 1px solid green;
}

JavaScript

$("#slider1").slider(
{
            value:2,
            min: 1,
            max: 10,
            step: 1,
            change: function( event, ui ) {
                $( "#slider1-value" ).html( ui.value );
         		sliderHandler();
            }
}
);
$("#slider2").slider(
{
            value:1,
            min: 1,
            max: 10,
            step: 1,
            change: function( event, ui ) {
                $( "#slider2-value" ).html( ui.value );
                sliderHandler();
            }
}
);
$( "#slider1-value" ).html(  $('#slider1').slider('value') );
$( "#slider2-value" ).html(  $('#slider2').slider('value') );
var sliderHandler = function(){
    var p1 = $('#slider1').slider('value');
    var p2 = $('#slider2').slider('value');
    var class_name = "s_"+p1+"_"+p2;
    $(".sli").hide();
    $("."+class_name).show();
}
sliderHandler();