diff --git a/dev/js/src/menu.js b/dev/js/src/menu.js
index 420d0bc..183e97a 100644
--- a/dev/js/src/menu.js
+++ b/dev/js/src/menu.js
@@ -12,10 +12,12 @@
   'menu/item',
   'menu/prefix',
   'menu/lengthField',
+  'menu/slider',
   'util'
 ], function (defaultItemClass,
 	     defaultPrefixClass,
-	     defaultLengthFieldClass) {
+	     defaultLengthFieldClass,
+	     sliderClass) {
 
   // Default maximum number of menu items
   var menuLimit = 8;
@@ -176,6 +178,8 @@
       };
       this._lengthField._menu = this;
 
+      // Initialize the slider
+      this._slider = sliderClass.create();
 
       var e = document.createElement("ul");
       e.style.opacity = 0;
@@ -185,6 +189,7 @@
       e.classList.add('roll');
       e.appendChild(this._prefix.element());
       e.appendChild(this._lengthField.element());
+      e.appendChild(this._slider.element());
 
       // This has to be cleaned up later on
       e["menu"] = this;
@@ -220,7 +225,7 @@
       this.active = false;
       // this.selected = undefined;
       this._items = new Array();
-      var i;
+      var i = 0;
 
       // Initialize item list based on parameters
       for (i in params) {
@@ -233,6 +238,9 @@
       };
 
       this._limit    = menuLimit;
+      this._slider.length(i);
+      this._slider.limit(this._limit);
+
       this._position = 0;  // position in the active list
       this._active   = -1; // active item in the item list
       this._firstActive = false; // Show the first item active always?
@@ -262,6 +270,7 @@
     limit : function (limit) {
       if (arguments.length === 1) {
 	this._limit = limit;
+	this._slider.limit(limit);
 	return this;
       };
       return this._limit;
@@ -315,6 +324,8 @@
 
       this._element.style.opacity = 1;
 
+      this._slider.show();
+
       // Iterate to the active item
       if (this._active !== -1 && !this._prefix.isSet()) {
 	while (this._list[this._position] < this._active) {
@@ -471,7 +482,7 @@
       // Remove all children
       var children = this._element.childNodes;
       // Leave the prefix and lengthField
-      for (var i = children.length - 1; i >= 2; i--) {
+      for (var i = children.length - 1; i >= 3; i--) {
 	this._element.removeChild(
 	  children[i]
 	);
@@ -501,10 +512,10 @@
 	item.highlight(this.prefix());
 
       var e = this.element();
-      // Append element after lengthFiled/prefix
+      // Append element after lengthField/prefix/slider
       e.insertBefore(
 	item.element(),
-	e.children[2]
+	e.children[3]
       );
     },
 
@@ -713,8 +724,8 @@
     // Remove the HTML node from the first item
     _removeFirst : function () {
       this.item(this._list[this._offset]).lowlight();
-      // leave lengthField/prefix
-      this._element.removeChild(this._element.children[2]);
+      // leave lengthField/prefix/slider
+      this._element.removeChild(this._element.children[3]);
     },
 
 
diff --git a/dev/js/src/menu/slider.js b/dev/js/src/menu/slider.js
new file mode 100644
index 0000000..8f27289
--- /dev/null
+++ b/dev/js/src/menu/slider.js
@@ -0,0 +1,52 @@
+define({
+
+  /**
+   * Create new prefix object.
+   */
+  create : function () {
+    return Object.create(this)._init();
+  },
+
+  // Initialize prefix object
+  _init : function () {
+
+    this._element = document.createElement('div');
+    this._element.setAttribute('class', 'ruler');
+
+    this._slider = this._element.appendChild(
+      document.createElement('span')
+    );
+
+    this._element.appendChild(document.createElement('div'));
+
+/*
+    this._string = '';
+
+    // Add prefix span
+    this._element = document.createElement('span');
+    this._element.classList.add('pref');
+    // Connect action
+
+    if (this["onclick"] !== undefined)
+      this._element["onclick"] = this.onclick.bind(this);
+
+*/    
+    return this;
+  },
+
+  show : function (i) {
+    this._slider.style.height = ((this._limit / this._length) * 100) + '%';
+  },
+
+  length : function (i) {
+    this._length = i;
+  },
+
+  limit : function (i) {
+    this._limit = i;
+  },
+
+  element : function () {
+    return this._element;
+  }
+});
diff --git a/dev/scss/header/menu.scss b/dev/scss/header/menu.scss
index 0016420..7baa398 100644
--- a/dev/scss/header/menu.scss
+++ b/dev/scss/header/menu.scss
@@ -51,6 +51,10 @@
   @include choose-item;
 }
 
+ul.menu:hover > div.ruler {
+  opacity: 1;
+}
+
 ul.menu {
   position: absolute;
   padding: 0;
@@ -59,6 +63,36 @@
   list-style-type: none;
   list-style-position: outside;
 
+  > div.ruler {
+    position: absolute;
+    right: 0px;
+    margin-right: -12px;
+    background-color: transparent;
+    width: 12px;
+    height: 100%;
+    opacity: 0;
+
+    > span {
+      position: absolute;
+      display: block;
+      right: 0px;
+      width: 6px;
+      cursor: pointer;
+      background-color: $light-grey;
+      border-radius: 3px;
+      z-index: 600;
+    }
+
+    > div {
+      position: absolute;
+      right: 1px;
+      width: 4px;
+      background-color: $dark-grey;
+      height: 100%;
+      border-radius: 2px;
+    }
+  }
+
   /**
    * List items
    */