如何在 Vue 中使用 select 框构建范围滑块？

Question

嗨，我是 Vue 的新手，我有一个使用 Vue 的项目，PHP 和 Laravel。 price range图片link

我必须建立一个如图所示的价格过滤器。但我不知道如何编写 select 框的代码，以便在移动幻灯片时值会发生变化。有人成功过吗？

到目前为止我做了什么。

    <template>
          <div class="col-12 col-lg-7 pb-2 pl-5"> 
            <div class="row align-items-baseline">
                <div class="col-3 col-lg-3 text-navy font-weight-bold">
                    予算
                </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"
                    class="col-7 col-lg-7 pl-lg-1"
                ></vue-slider>
            </div>
                <!-- ID Example -->
            <div class="row align-items-baseline ml-lg-3">
                <div class="col-5 col-lg-5 px-1 inputSelectWrap">
                    <select name="">
                        <option>下限なし</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                    </select>
                </div>
                <div class="text-center px-1">～</div>
                <div class="col-5 col-lg-5 px-1 inputSelectWrap">
                    <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",
        },
    }),

Answer 1

您可以使用 v-model 绑定两个 select 的值，因为它已经与 slider_value 绑定，所以它会更新。你可以找到工作示例 Here

 <template>
  <div class="col-12 col-lg-7 pb-2 pl-5">
    <div class="row align-items-baseline">
      <div class="col-3 col-lg-3 text-navy font-weight-bold">予算</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"
        class="col-7 col-lg-7 pl-lg-1"
      ></vue-slider>
    </div>
    <!-- ID Example -->
    <div class="row align-items-baseline ml-lg-3">
      <div class="col-5 col-lg-5 px-1 inputSelectWrap">
        <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 class="text-center px-1">～</div>
      <div class="col-5 col-lg-5 px-1 inputSelectWrap">
        <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>

如何在 Vue 中使用 select 框构建范围滑块？

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

javascript

vue.js

vuejs2