Слайд бар на jQuery и jQuery UI.

Разметка HTML

        <div class="slider"></div> 
       
        <div id="slider-result">50</div> 
       
          <input type="hidden" id="hidden"/>

CSS

/*фон слайдера*/
.slider {
width:230px;
height:11px;
background:url('slider-bg.png');
position:relative;
margin:0;
padding:0 10px;
}

/*стиль для кнопки слайдера*/
.ui-slider-handle {
width:24px;
height:24px;
position:absolute;
top:-7px;
margin-left:-12px;
z-index:200;
background:url('slider-button.png');
}

/*результирующий div, где показывается значение слайдера*/
#slider-result {
font-size:50px;
height:200px;
font-family:Arial, Helvetica, sans-serif;
color:#fff;
width:250px;
text-align:center;
text-shadow:0 1px 1px #000;
font-weight:700;
padding:20px 0;
}

/*Цвет заливки бара*/
.ui-widget-header {
background:url('fill.png') no-repeat left;
height:8px;
left:1px;
top:1px;
position:absolute;
}

a {
outline:none;
-moz-outline-style:none;
}

javascript

Подключаем jQuery и jQuery UI:

     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

И скрипт обработки:

                 $( ".slider" ).slider({
                animate: true,
                range: "min",
                value: 50,
                min: 10,
                max: 100,
                step: 10,
               
                //this gets a live reading of the value and prints it on the page
                slide: function( event, ui ) {
                    $( "#slider-result" ).html( ui.value );
                },

                //this updates the hidden form field so we can submit the data using a form
                change: function(event, ui) {
                $('#hidden').attr('value', ui.value);
                }
           
                });

СКАЧАТЬСкачек: 558
15,48 Kb
Кто скачал?

ДЕМОПосмотреть
пример