Range slider

							
                                
<template>
  <div>
    <vue-slider v-model="value"></vue-slider>
  </div>
</template>

<script>
// import component
import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js'
import 'vue-slider-component/dist-css/vue-slider-component.css'
// import theme
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider,
  },
  data() {
    return {
      value: 25,
    };
  },
};
</script>

                            
						

							
                                
<template>
  <BForm>
        <BFormGroup>
            <label class="form-label">Default slider</label>
            <vue-slider :min="100" :max="500" v-model="value"></vue-slider>
        </BFormGroup>
        <BFormGroup>
            <label class="form-label">Prohibit slider crossing</label>
            <vue-slider
                v-model="value2"
                :min="100"
                :max="500"
                :enable-cross="false"
            ></vue-slider>
        </BFormGroup>
        <BFormGroup>
            <label class="form-label">
                Limit the distance between the sliders
            </label>
            <vue-slider v-model="value3" :min-range="20" :max-range="50"></vue-slider>
        </BFormGroup>
        <BFormGroup>
            <label class="form-label"> Range slider with marks </label>
            <vue-slider v-model="value4" :interval="10" :marks="true"></vue-slider>
        </BFormGroup>
  </BForm>
</template>

<script>
// import component
import VueSlider from 'vue-slider-component/dist-css/vue-slider-component.umd.min.js'
import 'vue-slider-component/dist-css/vue-slider-component.css'
// import theme
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider,
  },
  data() {
    return {
      value: [200, 400],
      value2: [0, 200],
      value3: [0, 30],
      value4: [20, 80],
    };
  },
};
</script>