vue.jsでinputのrangeみたいな範囲指定で両サイド指定出来るようにする方法

2021.04.01

上記みたいに時刻とか、金額指定とか年代指定の時に使えるやつです。

普通のinput rangeだと片方しか指定出来なかったのでvue.jsで何かライブラリないか探しました。

公式。ビンゴなやつ見つけました。しかも公式めっちゃ見やすいw

今回は検索機能に上記を使った絞り込み機能を追加していきたいと思います。

実装すること

・導入の説明

・検索結果の絞り込み機能として使ってみる

大まかな流れ

インストール

コンポーネント呼び込み

コンポーネント記載追加

って感じです。

インストール

コマンドでインストールします。npmの他にもcdnとかyarnとかでもいけるみたいです。

npm install vue-slider-component --save

コンポーネント呼び込み

コンポーネントで使用できるようにして行きます。

<div>
 <vue-slider
         ref="slider"
         v-model="slider_value" :enable-cross="false"
         :min="0"
         :max="20"
 　></vue-slider>
</div>

。。。省略

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

。。。。省略

components: {
   'vueSlider': VueSlider,
},
data() {
   return {
     slider_value: [0, 20]
   }
 },

minとmaxについては最小値と最大値をしてしています。またv-modelでslider_valueを設定しているので範囲指定を処理に使用できます。

コンポーネント記載追加

上記で導入できたので、検索結果に対しての絞り込みに使ってみたいと思います。

　　　　　　　　　　　　　　　　　前提

検索機能が完成している。itemには年齢の情報が含まれている。

検索機能部分については今回は省きます。

検索機能について紹介している記事です

<template>
 <div class="search">
   <div class="side-area">
     <h6>検索する</h6>
     ...省略
     <div>
  1    <vue-slider
         ref="slider"
 2       v-model="slider_value" :enable-cross="false"
         :min="0"
         :max="20"
       ></vue-slider>
     </div>
   </div>
   <div class="card-columns">
     <div v-for="item in items" :key="item.id" >
       <div class="card my-1 mx-1 ">
           {{item.name}}
       </div>
     </div>
   </div>
</div>
</template>

<script>

import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
 components: {
   'vueSlider': VueSlider,
 },
 data() {
   return {
     items: [],
 3   slider_value: [0, 20]
   }
 },
 methods: {
   search() {
       ...省略(検索機能の記事に書いています)
           this.items = res.data
4          this.cat_age_set()
         }
       }).catch(function(err){
         console.log(err)
       })
     }
   },
   cat_age_set() {
5    this.items = this.items.filter(val => val.age >= this.slider_value[0] && val.age <= this.slider_value[1])
   }
 }
}
</script>

<style scoped>
.search{
 width: 60%;
 margin: auto;
}
.card-columns{
  column-count: 2;
}
</style>

1, 見た目の部分、インストールして使用できるようになった部分です！

2, slider_valueに設定されていることでメソッド内の処理で使用できます。配列の中に入っている形で最大値と最小値がどちらも取得できます。

3, 最大値と最小値の初期値を決めます。あくまで値であって範囲を決めている:minと:maxとは関係無いので注意！

4, 検索結果を代入した後にcat_age_set()メソッドを実行して絞り込みを行います。

5, filter()メソッドを使ってslider_valueのなかに配列の形で入っている最大値と最小値を使って新しい配列を作成しています。ここで作成したものがeachで回されてviewに表示されるってイメージですね。