How to build a range slider with select box in Vue?-CodePudding

Hi I am new in Vue and I have a project that uses Vue, PHP and Laravel. price rangepicture link

I have to build a price filter like the picture. But I have no idea to code the select box that value will change when moving slide. Anyone has successed in doing this?

What I did until now.

    <template>
          <div > 
            <div >
                <div >
                    予算
                </div>
                <vue-slider
                    ref="slider"
                    v-model="slider_value" :enable-cross="false"
                    :dot-size="dotSize"
                    :dot-style="dotStyle"
                    :rail-style="railStyle"
                    :process-style="processStyle"
                    :min="0"
                    :max="100"
                    :tooltip="false"
                    
                ></vue-slider>
            </div>
                <!-- ID Example -->
            <div >
                <div >
                    <select name="">
                        <option>下限なし</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div >～</div>
                <div >
                    <select name="">
                        <option>上限なし</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
            </div>
        </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': VueSlider,
    },
    data: () => ({
        slider_value: [0, 100],
        dotStyle: {
            backgroundColor:"#fff",
            borderColor:"#fff",
        },
        processStyle: {
            backgroundColor: "#1d3557",
        },
    }),

CodePudding user response：

You can loop through values by creating an Array of empty values

Use Array.from({ length: myVar })

Here's a hint:

  <input type="range" v-model="minVal" max="100"/>
  <input type="range" v-model="maxVal" max="100"/>
  <select>
    <option v-for="(val, index) in Array.from({ length: Math.abs(maxVal - minVal) })">
      {{ index   parseInt(minVal) }}
    </option>
  </select>

CodePudding user response：

you can bind value's of both select using v-model and as its already bind with slider_value it will update. you can find working example Here

 <template>
  <div >
    <div >
      <div >予算</div>
      <vue-slider
        ref="slider"
        v-model="slider_value"
        :enable-cross="false"
        :dot-size="dotSize"
        :dot-style="dotStyle"
        :rail-style="railStyle"
        :process-style="processStyle"
        :min="0"
        :max="100"
        
      ></vue-slider>
    </div>
    <!-- ID Example -->
    <div >
      <div >
        <select name="start" v-model="slider_value[0]">
          <option value="0">下限なし</option>
          <option :value="i" :key="i" v-for="i in 100">{{ i }}</option>
        </select>
      </div>
      <div >～</div>
      <div >
        <select name="end" v-model="slider_value[1]">
          <option value="0">上限なし</option>
          <option :value="i" :key="i" v-for="i in 100">{{ i }}</option>
        </select>
      </div>
    </div>
  </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: VueSlider,
  },
  data: () => ({
    slider_value: [0, 100],
    dotStyle: {
      backgroundColor: "#fff",
      borderColor: "#fff",
    },
    processStyle: {
      backgroundColor: "#1d3557",
    },
  }),
};
</script>