From 808708c0e1e2c79b794489f82bdfd90b679a6b1a Mon Sep 17 00:00:00 2001
From: Chad Kruse <chadokruse@users.noreply.github.com>
Date: Wed, 18 Oct 2017 15:47:09 -0500
Subject: [PATCH] Add rangeSlider [closes #3]

Will switch color back when collapsible bug is resolved
---
 _layouts/search.html   |  3 +++
 assets/css/search.scss |  7 +++++++
 assets/js/search.js    | 23 +++++++++++++++++++++++
 3 files changed, 33 insertions(+)

diff --git a/_layouts/search.html b/_layouts/search.html
index d15150f..6df3357 100644
--- a/_layouts/search.html
+++ b/_layouts/search.html
@@ -99,6 +99,9 @@ <h1>Search Our Grants</h1>
                   <div class="card">
                     <div id="ais-widget-refinement-list--grantee_city"></div>
                   </div>
+                  <div class="card">
+                    <div id="ais-widget-range-slider"></div>
+                  </div>
                 </div>
                 <div class="col s12">
                   <div class="section">
diff --git a/assets/css/search.scss b/assets/css/search.scss
index 75f7a72..52ecc49 100644
--- a/assets/css/search.scss
+++ b/assets/css/search.scss
@@ -235,6 +235,13 @@ nav.nav-center ul.ul-center li .ais-search-box {
   .ais-show-more, .show-more {
     margin-top: 24px;
   }
+  /* Range slider */
+  .ais-range-slider--handle {
+    border-color: $text-muted;
+  }
+  .ais-range-slider .rheostat-horizontal .rheostat-progress {
+    background-color: #fafafa;
+  }
 }
 
 /* Clear all */
diff --git a/assets/js/search.js b/assets/js/search.js
index 9f23af4..c4f3c73 100644
--- a/assets/js/search.js
+++ b/assets/js/search.js
@@ -204,6 +204,29 @@ $(document).ready(function(){
     })
   );
 
+  search.addWidget(
+    instantsearch.widgets.rangeSlider({
+      container: '#ais-widget-range-slider',
+      attributeName: 'grant_amount',
+      collapsible: {
+        collapsed: true
+      },
+      cssClasses: {
+        header: widgetHeaderClasses,
+        body: 'card-content',
+      },
+      templates: {
+        header: 'Amount' + templateRefinementHeader
+      },
+      tooltips: {
+        format: function(rawValue) {
+          return '$' + Math.round(rawValue).toLocaleString();
+        }
+      },
+      pips: false,
+    })
+  );
+
   search.addWidget(
     instantsearch.widgets.currentRefinedValues({
       container: '#ais-widget-current-refined-values',