Add rangeSlider [closes #3]

Will switch color back when collapsible bug is resolved
chadokruse · Oct 18, 2017 · 808708c · 808708c
1 parent 7e64929
commit 808708c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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',