Vue vue-slider-component　Range

by Ea Bangalore

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/default.css">
<script src="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/dist/vue-slider-component.umd.min.js"></script>
<div id="app">
  <div>
    <vue-slider
      ref="slider"
      v-model="value" :enable-cross="false" 
    >
    
      <template v-slot="{ value: innerValue }" >
         <div style="display:flex;">
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
            <li><img src="http://placehold.it/60x60"/></li>
         </div>
  </template>
    
    
  <!--<template v-slot:process="{ start, end, style, index }">
    <div class="vue-slider-process custom-class" :style="[style, customStyle]">
      <div style="display:flex;">
              <li><img src="http://placehold.it/60x60"/></li>
        <li><img src="http://placehold.it/60x60"/></li>
        <li><img src="http://placehold.it/60x60"/></li>
        <li><img src="http://placehold.it/60x60"/></li>
        <li><img src="http://placehold.it/60x60"/></li>
        <li><img src="http://placehold.it/60x60"/></li>
        <li><img src="http://placehold.it/60x60"/></li>
      </div>
    </div>
  </template> -->
  
    </vue-slider>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 50px;
  transition: all 0.2s;
}

 .custom-mark {
    position: absolute;
    top: 10px;
    transform: translateX(-50%);
    white-space: nowrap;
  }

.vue-slider{
     height: 137px !important;
}

.vue-slider-dot{
  height: 100% !important;
  width: 4px !important;
}

.vue-slider-dot-handle{
  border-radius:0 !important;
}

Vue

const vueSlider = window[ 'vue-slider-component' ];

let app = new Vue({
  el: '#app',
  components: {
    'vueSlider': vueSlider,
  },
  data: {
     value: [0, 30],
  }
});