Slider

Gemfile

@@ -22,6 +22,7 @@ group :assets do
 end
 
 gem 'jquery-rails'
+# gem 'jquery-ui-rails'
 
 group :development do
   gem 'better_errors'

Gemfile.lock

@@ -74,6 +74,9 @@ GEM
     jquery-rails (2.2.1)
       railties (>= 3.0, < 5.0)
       thor (>= 0.14, < 2.0)
+    jquery-ui-rails (4.0.2)
+      jquery-rails
+      railties (>= 3.1.0)
     json (1.7.7)
     kgio (2.8.0)
     listen (1.0.3)
@@ -198,6 +201,7 @@ DEPENDENCIES
   geocoder
   guard-rspec
   jquery-rails
+  jquery-ui-rails
   meta_request
   nyan-cat-formatter
   pg

app/assets/javascripts/application.js

@@ -11,5 +11,10 @@
 // GO AFTER THE REQUIRES BELOW.
 //
 //= require jquery
-//= require jquery_ujs
+//= require rangeslider/jquery-1.7.1.min
+//= require rangeslider/jquery-ui-1.8.16.custom.min
+
 //= require_tree .
+//= require rangeslider/jquery.mousewheel.min
+//= require rangeslider/jQRangeSlider-min
+

app/assets/javascripts/timeSlider.js

@@ -0,0 +1,18 @@
+$("#slider").rangeSlider({
+		range: {min: 60, max: false },
+		bounds: {min: 0, max: 1439},
+		step: 1,
+		formatter:function(val){
+			var hour = (val/60 < 1) ? 12 : Math.floor(val/60)
+			var meridiem = hour < 13 ? "AM" : "PM"
+			var minutes = val % 60
+			var time = ((hour > 12 ) ? hour - 12 : hour) + ":" + ((minutes < 10) ? (minutes + "0") : minutes) + " " + meridiem
+			return time
+	}
+});
+
+
+$("#slider").bind("valuesChanging", function(e, data){
+  console.log("Max:" + data.values.max);
+	console.log("Min: " + data.values.min);
+});

app/assets/stylesheets/iThing.css

@@ -0,0 +1,193 @@
+/**
+ * Theme for jQRangeSlider
+ * Inspired by http://cssdeck.com/item/381/itunes-10-storage-bar
+ *        and http://cssdeck.com/item/276/pure-css-arrow-with-border-tooltip
+ */
+
+.ui-rangeSlider-withArrows .ui-rangeSlider-container{
+  margin: 0 15px;
+  -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+  -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+  box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+}
+
+.ui-rangeSlider-noArrow .ui-rangeSlider-container{
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  border-left: solid 1px #515862;
+  border-right: solid 1px #515862;
+
+  -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+  -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+  box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+}
+
+.ui-rangeSlider-container{
+ 	height: 30px;
+  border-top: solid 1px #232a32;
+  border-bottom: solid 1px #6a7179;
+  background: #67707F;
+  background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0));
+}
+
+
+.ui-rangeSlider-arrow{
+  width:14px;
+  height:30px;
+  border-top: solid 1px #232a32;
+  border-bottom: solid 1px #6a7179;
+  background: #67707F;
+  cursor:pointer;
+
+  box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+  -webkit-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+  -moz-box-shadow: inset 0px 4px 6px -2px RGBA(0,0,0,0.5);
+  background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0));
+}
+
+.ui-rangeSlider-leftArrow{
+  border-radius:4px 0 0 4px;
+  border-left: solid 1px #515862;
+}
+
+.ui-rangeSlider-rightArrow{
+  border-radius:0 4px 4px 0;
+  border-right: solid 1px #515862;
+}
+
+.ui-rangeSlider-arrow-inner{
+  position: absolute;
+  top: 50%;
+  border: 10px solid transparent;
+  width:0;
+  height:0;
+
+  margin-top: -10px;
+}
+
+.ui-rangeSlider-leftArrow .ui-rangeSlider-arrow-inner{
+  border-right:10px solid #a4a8b7;
+  left: 0;
+  margin-left: -8px;
+}
+
+.ui-rangeSlider-leftArrow:hover .ui-rangeSlider-arrow-inner{
+  border-right:10px solid #b3b6c2;
+}
+
+.ui-rangeSlider-rightArrow .ui-rangeSlider-arrow-inner{
+  border-left:10px solid #a4a8b7;
+  right: 0;
+  margin-right: -8px;
+}
+
+.ui-rangeSlider-rightArrow:hover .ui-rangeSlider-arrow-inner{
+  border-left:10px solid #b3b6c2;
+}
+
+.ui-rangeSlider-innerBar{
+  width: 110%;
+  height: 100%;
+  left: -10px;
+  overflow: hidden;
+}
+
+.ui-rangeSlider-bar{
+	background: #68a1d6;
+  height: 29px;
+  margin:1px 0;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  cursor:move;
+	cursor:grab;
+	cursor: -moz-grab;
+
+	-webkit-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
+  -moz-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
+  box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);;
+ }
+
+.ui-rangeSlider-handle{
+	width:10px;
+	height:30px;
+	background: transparent;
+	cursor:col-resize;
+}
+
+.ui-rangeSlider-label{
+  background: #888DA0;
+  background: -moz-linear-gradient(top, #67707F 0%, #888DA0 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#67707F), color-stop(100%,#888DA0));
+  padding: 5px 10px;
+  bottom:10px;
+
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+
+  -webkit-box-shadow: 0px 1px 0px #c2c5d6;
+  -moz-box-shadow: 0px 1px 0px #c2c5d6;
+  box-shadow: 0px 1px 0px #c2c5d6;
+
+  color:white;
+  font-size:15px;
+
+  cursor:col-resize;
+}
+
+.ui-editRangeSlider .ui-rangeSlider-label{
+}
+
+.ui-rangeSlider-label-inner{
+
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  display: block;
+  z-index:99;
+  border-left: 10px solid transparent;
+  border-right: 10px solid transparent;
+
+  margin-left: -10px;
+  border-top: 10px solid #888DA0;
+}
+
+.ui-editRangeSlider-inputValue{
+  width:2em;
+  text-align:center;
+  font-size:15px;
+}
+
+.ui-rangeSlider .ui-ruler-scale{
+  position:absolute;
+  top:0;
+  left:0;
+  bottom:0;
+  /* Handle width */
+  right:10px;
+}
+
+.ui-rangeSlider .ui-ruler-tick { 
+  float: left; 
+}
+
+.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-inner{
+  color:white;
+  margin-top:1px;
+  border-left: 1px solid white;
+  height:29px;
+  padding-left:2px;
+  position:relative;
+}
+
+.ui-rangeSlider .ui-ruler-scale0 .ui-ruler-tick-label{
+  position:absolute;
+  bottom: 6px;
+}
+
+.ui-rangeSlider .ui-ruler-scale1 .ui-ruler-tick-inner{
+  border-left:1px solid white;
+  margin-top: 25px;
+  height: 5px;
+}

app/views/layouts/application.html.erb

@@ -12,6 +12,8 @@
 <body>
 
 <%= yield %>
+
 <%= javascript_include_tag "application" %>
+
 </body>
 </html>

app/views/session/index.html.erb

@@ -1,4 +1,5 @@
 <div id='map'></div>
+<div id="slider"></div>
 
 <div id='legend-content' style='display: none;'>
   <div class='my-legend'>

spec/models/sexual_offender_spec.rb

@@ -0,0 +1,5 @@
+require 'spec_helper'
+
+describe SexualOffender do
+  pending "add some examples to (or delete) #{__FILE__}"
+end