vue.js range slider 사용하기

vue.js 를 사용하고 있는 중에 range slider가 필요하게 되었는데,

bootstrap-vue 에는 range slider 를 지원하는 것을 찾지 못해서 구글링 중에 누군가가 개발해놓은 것을 발견했다!! 감사합니다 ㅎ

 

www.npmjs.com/package/vue-range-slider

vue-range-slider

 

위의 링크로 들어가서 그냥 적혀있는 대로 하면 된다.

링크에도 적혀있듯이 npm 으로 설치와 사용법은 아래와 같이 할 수 있다.

 

npm 설치

npm i vue-range-slider

 

사용법

vue

import RangeSlider from 'vue-range-slider'
import 'vue-range-slider/dist/vue-range-slider.css'

data() {
        return {
            slider_value: '200'
        }
    },

css

.slider {
  /* overwrite slider styles */
  width: 100%;
}

html

<range-slider
	class="slider"
	min="100"
	max="600"
	step="10"
	v-model="slider_value">
</range-slider> 
<span>{{slider_value}}</span>

 

쨘