<div class="content">

  <div class="top"></div>

<ul class="set">
  <li><label for="processor">Процессор</label> <span id="processor"></span></li>
  <li><label for="ram">RAM</label> <span id="ram"></span></li>
  <li><label for="storage">HDD</label> <span id="storage"></span></li>
  <li><label for="bandwidth">Трафик</label> <span id="bandwidth"></span></li>
  <li><label for="amount">Цена за мес.</label> <span id="amount"></span></li>
  <li id="hourlytime"><label for="hourly">Цена за час</label> <span id="hourly"></span></li>
</ul>
  <div id="slider"></div>
  <div id="slider-page"></div>
   
</div>

html, body {font:13px sans-serif; color:#000000; background:#c2c2c2; height:100%; }
.content{width:505px; margin:0 auto;}
h2{font-size:22px; font-weight:bold; color:#000; margin-bottom:27px}
.set{list-style:none; height:75px; margin:0 0 10px 0; padding-left:0; position:relative; background-color:#fefefe; }
.set li{position:relative; color:#a8a8a8; width:100px; height:75px; float:left; border-right:1px solid #f6f6f6; font-size:16px; line-height:22px; display:block}
.set li label{color:#a8a8a8; margin:13px 8px 5px 8px; display:block; font-size:12px}
.set span{width:78px; margin:0px 9px; font-size:17px; font-weight:bold; background:none; color:#000}
#hourlytime{position:absolute; left:505px; top:-5px; width:100px; padding:0 10px 14px 10px; height:72px; background:url(bg_hourlytime.png) no-repeat; color:#fff; z-index:999; border:none; display:none}
#hourlytime span{color:#fff}
#hourlytime label{color:#ccc}
#pricing .set li{width:121px}
.top{margin-bottom:150px; overflow:hidden}
.ui-widget-content {background:#f6f6f6 url(slider_scale.png) no-repeat; }
.ui-widget-content .ui-state-default, .ui-widget-header {background-image: url(handle.png); }
.ui-slider {position: relative; text-align: left; margin:0 10px;}
.ui-slider .ui-slider-handle{position: absolute; width:33px; height: 20px; cursor: pointer;}
.ui-slider-horizontal{height:.6em;}
.ui-slider-horizontal .ui-slider-handle{top: -.5em; margin-left: -1.2em;}
#slider-page{text-align:center; font-weight:bold; height:18px; overflow:hidden; line-height:17px; background:url(scale.png) no-repeat top center; padding-top:25px}
#slider{margin-bottom:10px}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
  <script type="text/javascript">jQuery.cookie = function (key, value, options) {

  // key and value given, set cookie...
  if (arguments.length > 1 && (value === null || typeof value !== "object")) {
  options = jQuery.extend({}, options);

  if (value === null) {
  options.expires = -1;
  }

  if (typeof options.expires === 'number') {
  var days = options.expires, t = options.expires = new Date();
  t.setDate(t.getDate() + days);
  }

  return (document.cookie = [
  encodeURIComponent(key), '=',
  options.raw ? String(value) : encodeURIComponent(String(value)),
  options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
  options.path ? '; path=' + options.path : '',
  options.domain ? '; domain=' + options.domain : '',
  options.secure ? '; secure' : ''
  ].join(''));
  }

  // key and possibly options given, get cookie...
  options = value || {};
  var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
  return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};</script>

  <script src="jquery.price.js" type="text/javascript"></script>
   
<script type="text/javascript">
$(document).ready(function () {
  $.priceSlider({
  default_blocks: (function() {
  var blocks = $.cookie('dataslider');
  if (blocks) {
  return parseInt(blocks, 0);
  } else {
  return 1;
  }
  })()
  });
  $('#slider-price-box').tooltip({});
   
});
</script>