noUiSlider - double range slider with two inputs + vue.js

Question

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.

Answer 1

Here's the tweaks you'd need on the slider end:

Use two handles:

start: [this.slider.startMin, this.slider.startMax]

The update event must handle both:

vue.$data[handle ? 'maxRange' : 'minRange'] = values[handle];

In your updateSlider function:

this.Slider.noUiSlider.set([this.minRange, this.maxRange]);

Answer 2

Here is a fairly simple answer I came up with after needing the same thing. I looked at the same slider and decided to come up with my own based on a js slider I found. Below is the fiddle.

js fiddle dual range slider in vuejs

var app = new Vue({
  el: '#app',
  data: {
    minPrice: "500",
    maxPrice: "50000"
  },
  methods: {
    slider: function() {
      if (this.minPrice > this.maxPrice) {
        var tmp = this.maxPrice;
        this.maxPrice = this.minPrice;
        this.minPrice = tmp;
      }
    }
  }
})

.range-slider {
  width: 300px;
  margin: auto;
  text-align: center;
  position: relative;
  height: 6em;
}

.range-slider svg,
.range-slider input[type=range] {
  position: absolute;
  left: 0;
  bottom: 0;
}

input[type=number] {
  border: 1px solid #ddd;
  text-align: center;
  font-size: 1.6em;
  -moz-appearance: textfield;
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type=number]:invalid,
input[type=number]:out-of-range {
  border: 2px solid #ff6347;
}

input[type=range] {
  -webkit-appearance: none;
  width: 100%;
}

input[type=range]:focus {
  outline: none;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: #2497e3;
}

input[type=range]:focus::-ms-fill-lower {
  background: #2497e3;
}

input[type=range]:focus::-ms-fill-upper {
  background: #2497e3;
}

input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background: #2497e3;
  border-radius: 1px;
  box-shadow: none;
  border: 0;
}

input[type=range]::-webkit-slider-thumb {
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 0px #000;
  border: 1px solid #2497e3;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background: #a1d0ff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div class="range-slider">
    <span @change="slider">from <input v-model.number="minPrice" type="number"  min="0" max="120000"/> to <input  v-model.number="maxPrice" type="number"  min="0" max="120000"/></span>
    <input @change="slider" v-model.number="minPrice" min="0" max="120000" step="500" type="range" />
    <input @change="slider" v-model.number="maxPrice" min="0" max="120000" step="500" type="range" />
    <svg width="100%" height="24">
                          <line x1="4" y1="0" x2="300" y2="0" stroke="#444" stroke-width="12" stroke-dasharray="1 28"></line>
                        </svg>
  </div>
</div>

Answer 3

I don't think its possible to tweak that component and make it a range slider.

There is a JQuery UI component which manages to do ranges: https://jqueryui.com/slider/#range

And, it is possible to wrap JQuery UI components, and make them work in a Vue environment: https://vuejsdevelopers.com/2017/05/20/vue-js-safely-jquery-plugin/

If you can make the two to work together it will meet your requirement. Also, you would have to bundle JQuery and JQuery UI as dependencies.