Guide to creating a select box connected to a range slider in VueJS

Hey there! I'm a beginner in Vue and currently working on a project that involves Vue, PHP, and Laravel. Here is a picture link showing the price range filter that I need to implement.

I'm struggling with coding the select box so that its value changes while moving the slider. Has anyone successfully achieved this before?

Here's what I have done so far:

<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">
                Budget
            </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>No Lower Limit</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>No Upper Limit</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",
        },
    }),
javascriptvue.jsvuejs2

Answer №1

Utilize v-model to bind the values of both select elements, ensuring they update when bound with slider_value. Visit this working example 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">Budget</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>
    <!-- Example IDs -->
    <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">No Lower Limit</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">No Upper Limit</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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Require modification of JSON values in React Promise code

Looking to modify the data returned from a promise and wrap a link around one of the fields. Here is the React code: this.state = { medications: [], } queryMeds().then((response) => { this.setState({medications: response}); }); The response c ...

javascriptarraysjsonreactjspromise

multer - the file uploaded by the request is not defined

I've been working on an app with Node, Express, and multer for image uploads. However, after submitting the form, req.file is coming up as undefined. I've spent hours trying to troubleshoot this issue but haven't been able to pinpoint the pr ...

javascriptnode.jsexpressmulter

Combining CK Editor 5 from source with Vue JS and utilizing components locally results in duplication

I am facing an issue with my page components setup as follows: BlogEntryPointComponent includes NewBlogComponent and BlogEditComponent both the NewBlogComponent and BlogEditComponent are using the same code snippet: import BlogEditor from '../../.. ...

vue.jsckeditorckeditor5

Tips for retaining input field content within a BootstrapVue table

Below is a BootstrapVue table I'm working with; https://i.sstatic.net/xu5Et.png The code, courtesy of this response, is showcased below; new Vue({ el: '#app', data() { return { filter: '', items: [ { i ...

javascriptvue.jscookiesbootstrap-vue

Remove array element by key (not numerical index but string key)

Here is a JavaScript array that I am working with: [#ad: Array[0]] #ad: Array[0] #image_upload: Array[0] 13b7afb8b11644e17569bd2efb571b10: "This is an error" 69553926a7783c27f7c18eff55cbd429: "Yet another error" ...

javascriptarrays

Enhance the interactivity of Javascript results by making them clickable

I'm new to JavaScript and facing a challenge. I have a JSON file that I'm using to retrieve data. I now want to make the search results clickable so they can be directly inserted into an input field. Eventually, I plan on incorporating them into ...

javascriptjsonasynchronousfetch

Vue: need to import a package: unable to set a value to a constant property 'exports' of the object '#<Object>'

After installing the resource-bundle package in my project, I attempted to use it in my main.js file: /*main.js*/ var co=require('co'); var loader = require('resource-bundle'); co(function*(){ ... ... }).catch(onerror); Upon exa ...

javascriptecmascript-6vue.jsvuejs2es6-modules

Leverage Vue.js with Vuex for state management to achieve two-way binding without the need for mutation via v-model

While I understand that mutations are typically used to change state, I couldn't help but wonder if it's technically feasible to utilize state in a v-model binding. This is how I currently handle it: In the HTML: ... <input v-model='to ...

vue.jsvuextwo-way

gulp-watch does not monitor files that are newly created or deleted

Currently working on a task: gulp.task('assetsInject', function () { gulp.src(paths.index) .pipe(plugins.inject( gulp.src(paths.scripts, {read: false}), { addRootSlash: false } ...

javascriptnode.jsgulp

Attempting to conceal image previews while incorporating pagination in Jquery

I'm working on implementing pagination at the bottom of a gallery page, allowing users to navigate between groups of thumbnail images. On this page, users can click on thumbnails on the left to view corresponding slideshows on the right. HTML <di ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the reason for the lack of arguments being passed to this Express middleware function?

I have been developing a middleware that requires the use of `bodyParser` to function, however I do not want to directly incorporate it as a dependency in my application. Instead, I aim to create a package that includes this requirement and exports a middl ...

javascriptnode.jsexpressmiddleware

Achieving optimal hardware performance for WebGL compatibility is essential

Lately, I have been exploring the world of Three.js to create impressive 3D scenes in WebGL. To ensure compatibility for all users, I have also developed versions using Three's CanvasRenderer which may not be as detailed but can still function on brow ...

javascriptoptimizationcanvasthree.jswebgl

Attempting to import a npm module that is not defined

I recently released an npm package. It is working perfectly when accessed via the global variable window.Router in the browser, but I'm facing issues when trying to import it using ES modules in a Meteor application. It keeps returning undefined... ...

javascriptnode.jsmeteornpmwebpack

Puppeteer headful Browser running on Node JS fails to start

Experimenting with puppeteer to explore browser automation techniques. I'm trying to launch the chromium browser in visible mode rather than headless, so I've set the launch option to false. However, Chromium still isn't opening as expected. ...

javascriptnode.jspuppeteerchromiumheadless

This guideline never refreshes the information it contains

I'm currently working on a directive that needs to reload its content automatically. Unfortunately, I haven't had much success with it so far. Any assistance would be greatly appreciated. UPDATE: I attempted the suggested solution but encountere ...

javascriptangularjsangularjs-directive

Add HTML content individually to each item in the array

I am currently developing a plugin and I need to load a preset in order to populate a form with the relevant data. In an attempt to write concise code, I created a variable called "template" that looks like this: var Fields = '<div c ...

javascriptjqueryhtml

When assessing a list against an array of objects in JavaScript

I am currently working on some Angular code with the objective of minimizing the use of Angular 1.x functionality, as it will be refactored in the near future. My task involves comparing an array: let subscription = [ "Cinemax Subscription", "Disn ...

javascriptangularjsarraysloops

Sending information to @select of multiselect in Vue.js - vue-multiselect

I'm currently working on passing a parameter to the @select event function in Vue.js HTML <template> <div class="container"> <div v-for="(billItem, k) in billItems" :key="k" > <div class=&q ...

javascriptvue.jsvuejs2vue-componentvue-multiselect

How to insert a row above the header in an Excel sheet using JavaScript within

i am using excel js to export json data to excel. The json data is successfully exported to the sheet, but now I need to add a row that provides details of the sheet above the header text. for more details please refer image the code is shown below: i ...

javascriptangularexcelxlsxexceljs

Is there a way to make elasticX() and elasticY() only affect the upper bound in dc.js?

One question I have regarding my bubbleChart in dc.js is related to the x-axis. I want the count on the x-axis to always start at 0, but have an upper bound that adjusts based on the range I am looking at. Currently, when I use .elasticX(true), both the up ...

javascriptd3.jsdc.jscrossfilter