diff --git a/javascripts/demo.js b/javascripts/demo.js
index 0905c22..38fc6a8 100644
--- a/javascripts/demo.js
+++ b/javascripts/demo.js
@@ -11,5 +11,12 @@ $(document).ready(function() {
 		revert: "invalid",
 		helper: "clone"
 	});
+
+  $(".fs").on("sortupdate", function() {
+      $(this).attr("data-content", $(this).fsortable("capacity"));
+  }).each(function() {
+      // Set the initial value of the attribute.
+      $(this).attr("data-content", $(this).find(".fsortable-empty").length);
+  });
 });
 
diff --git a/stylesheets/demo.css b/stylesheets/demo.css
index a152d1a..1d84d66 100644
--- a/stylesheets/demo.css
+++ b/stylesheets/demo.css
@@ -37,6 +37,14 @@
 	height: 100px;
 }
 
+.fs:after {
+  content: attr(data-content) " slots left";
+  position: absolute;
+  top: 10px;
+  width: 50px;
+  height: 50px;
+}
+
 .fsortable-empty {
 	float: left;
 	height: 20px;