eddieace
6
0
Vue

Vue rangeslider mousedrag not working

Posted 2 years ago by eddieace

I'm trying to get my rangeslider in vue.js to work. For some reason draggin by using mobile or mousebutton is not working. Clicking is working perfectly. Any clues?

Here is my RangeSlider.vue file

<script>
  export default {
    props: {
      min: {
        required: true,
      },
      max: {
        required: true,
      },
      suffix: {
        required: false,
        default: '',
      },
      name: {
        required: true,
      }
    },

    data() {
      return {
        dragging: false,
        value: 0,
        id: '',
      };
    },

    mounted() {
      $(window).mouseup(e => {
        if (this.dragging) {
          this.dragging = false;
        }
      });

      $(window).mousemove(e => {
        if (this.dragging) {
          this.move(e);
        }
      });

      this.id = this.makeid();
    },

    methods: {
      drag() {
        this.dragging = true;
      },

      drop() {
        this.dragging = false;
      },

      move(e) {
        const sliderPos = $('#' + this.id + ' .range-slider-slider').offset().left;
        const sliderWidth = $('#' + this.id + ' .range-slider-slider').width();
        const min = 0;
        const max = sliderWidth - $('#' + this.id + ' .range-slider-handle').width();

        const position = Math.min(max, Math.max((e.pageX - 25) - sliderPos, min));

        $('#' + this.id + ' .range-slider-handle').css({
          left: position + 'px',
        });

        const n = this.max - this.min;
        const k = position / sliderWidth;
        const v = Number(Math.ceil(n * k)) + Number(this.min);

        if (v == this.max) {
          this.value = v + '+';
        } else {
          this.value = v;
        }
      },

      makeid() {
          var text = "";
          var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";

          for( var i=0; i < 8; i++ )
              text += possible.charAt(Math.floor(Math.random() * possible.length));

          return text;
      }
    }
  };
</script>

<template>
  <div class="range-slider" :id="id">
    <input v-model="value" type="hidden" :name="name">
    <div class="range-slider-slider" @click="move"></div>
    <div :class="['range-slider-handle', dragging ? 'active' : '']" @mousedown="drag" @mouseup="drop"><span class="ranger-slider-label">{{ value }} {{ suffix }}</span></div>
  </div>
</template>

And here is my form-group

<div class="form-group">
    <label for="experience">{{ trans('position.experience') }}</label>
    <range-slider name="experience" min="0" max="10"></range-slider>
</div>

Please sign in or create an account to participate in this conversation.

Laracasts Mascot

Hi, Have We Met Yet?

Did you know that, in addition to the forum, Laracasts includes well over 1000 lessons on modern web development? All for the price of one lunch out per month.

Sign Me Up

Channels

Reply to

Use Markdown with GitHub-flavored code blocks.