Slider n arrows

Gruntfile.js

@@ -31,6 +31,9 @@ module.exports = function(grunt) {
  'lib/iced-coffee-script.js':
  'iced-coffee-script/extras/iced-coffee-script-1.8.0-c.js',
  'lib/jquery.js' : 'jquery/dist/jquery.js',
+ 'lib/jquery-ui.js' : 'jquery-ui/jquery-ui.js', 
+ 'lib/jquery-ui-slider-pips.js': 'jquery-ui-slider-pips/dist/jquery-ui-slider-pips.js',
+ 'lib/jquery-ui-slider-pips.css': 'jquery-ui-slider-pips/dist/jquery-ui-slider-pips.css', 
  'lib/jquery.autocomplete.min.js':
  'devbridge-autocomplete/dist/jquery.autocomplete.min.js',
  'lib/jquery-deparam.js' : 'jquery-deparam/jquery-deparam.js',
@@ -77,7 +80,7 @@ module.exports = function(grunt) {
  },
  options: {
  browserifyOptions: {
- debug: false,
+ debug: true,
  noParse: NO_PARSE
  },
  watch: false,
@@ -330,4 +333,3 @@ module.exports = function(grunt) {
  grunt.registerTask('default',
  ['build', 'test']);
 };
-

bower.json

@@ -12,6 +12,8 @@
  "html2canvas": "#0.5.0-alpha1",
  "iced-coffee-script": "PencilCode/pencil-coffee-script#pencil",
  "jquery": "latest",
+ "jquery-ui":"latest",
+ "jquery-ui-slider-pips": "latest", 
  "jquery-deparam": "latest",
  "jquery-turtle": "PencilCode/jquery-turtle#master",
  "lodash": "latest",

content/editor.html

@@ -12,6 +12,8 @@
 </style>
 <link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/editor.css">
 <link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/droplet.css">
+<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/flick/jquery-ui.css">
+<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/jquery-ui-slider-pips.css">
 <link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/font-awesome.css">
 <link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/tooltipster/css/tooltipster.css">
 </head>
@@ -77,7 +79,7 @@
 </div>
 <div id="charlie" class="pane"></div>
 </div>
-<div id="guidepane"><div class="guidetitle">guide</div><div class="guidepreview"><iframe></iframe></div></div>
+<div id="guidepane"><div class="guidetitle">guide</div><div class="guidepreview"><iframe id = 'my-iframe'></iframe></div></div>
 </div><!-- end clip -->
 <script src="/load<!--#echo var="filepath"-->?callback=preload"></script>
 <script src="/lib/ace/ace.js"></script>