Try to add year slider

lolibrary · Aug 4, 2023 · 3e65eef · 3e65eef
1 parent 4bd8b3b
commit 3e65eef
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
         "qs": "^6.8.0",
         "sass-svg-uri": "^1.0.0",
         "simple-lightbox": "^2.1.0",
-        "vue-select": "^3.1.0"
+        "vue-select": "^3.1.0",
+        "bootstrap-slider": "11.0.2"
     }
 }
diff --git a/resources/views/components/filters.blade.php b/resources/views/components/filters.blade.php
@@ -27,8 +27,19 @@
         </div>
         @endforeach
         <div class="pb-2">
-            <label class="control-label">Year</label>
+            <label class="control-label" for="year-slider">Year</label>
             <v-select style="width: 100%" v-model="state.years" :options="years" placeholder="Tap to filter" multiple></v-select>
+            <input
+                type="text"
+                name="year"
+                id="year-slider"
+                data-provide="slider"
+                data-slider-ticks="[1970, 2023]"
+                data-slider-ticks-labels='["1970", "2023"]'
+                data-slider-min="1970"
+                data-slider-max="2023"
+                data-slider-step="1"
+            >
             <div class="match_type"> {{__('ui.search.match_type')}}
                 <div class="btn-group btn-group-toggle" data-toggle="buttons">
                   <label class="btn btn-outline-secondary active btn-sm">