Динамический скроллбар стоимости услуг

Динамическая строка прокрутки с целью определения наилучшего баланса между ценой и качеством предлагаемых услуг, в данном случае хостинга.

HTML

<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>

CSS

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
}

JS

Подключаем jQuery, jQuery UI, jQuery.cookie и jQuery.price.js

     <script type="text/jаvascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
     <script type="text/jаvascript" src="jquery-ui-1.8.2.custom.min.js"></script>
     <script type="text/jаvascript">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/jаvascript"></script>
     
<script type="text/jаvascript">
$(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>