I want a double range slider with two inputs in order to control the range.

Just like this one:
<https://i.stack.imgur.com/8w0UI.png>

I also need to get it alongside with vue.js.

At the moment I have the following html:

```
   <div id="main">
        <br>
        <div id="slider"></div>
        <br>
        <input id="slider-input" v-model="third" v-on:change="updateSlider" />
    </div>

```

And my JavaScript:

```
  var vue = new Vue({
    el: '#main',
    data: {
        minRange: 40,
        slider: {
            min: 0,
            max: 100,
            start: 40,
            step: 1
        },
        Slider: document.getElementById('slider')
    },
    methods: {
        updateSlider: function updateSlider() {
            this.Slider.noUiSlider.set(this.minRange);
        }
    },
    ready: function ready() {
        noUiSlider.create(this.Slider, {
            start: this.slider.start,
            step: this.slider.step,
            range: {
                'min': this.slider.min,
                'max': this.slider.max
            }
        });
    }
});

vue.$data.Slider.noUiSlider.on('update', function(values, handle) {
    vue.$data.minRange = values[handle];
});

```

With this I can have a range slider with one handler. I can drag the handler, update the values in the input and, also, write some new values and update the handler position (UI).

Now, I want to add another handler and do all the features I'm able to do with the one I have, right now.

How can I do this? (duplicate the input, add a data.maxRange, and...?

Thanks.