Vue-slider-component: Slider incorrectly resizes when orientation changes on mobile devices

[caseyronan]

See attached screenshots of the example page in portrait and landscape orientations on mobile (ignore overlapping text). The slider component does not resize correctly as can be seen with the incorrect piecewise label gaps.

Issue is reproducible in my own project, as well as on the example page.
Thank you.

[NightCatSama]

Sorry, so long ago to reply.

Now the component will only automatically update the component size when the resize event is triggered.

So in other cases, you need to call the refresh method to manually update.

[caseyronan]

No problem - I got it working already. Code for anyone interested...

mounted() {
  this.$nextTick(function () {
    // Orientation event for mobile users
    window.addEventListener('orientationchange', this.getOrientationChange);

    // Init
    this.getOrientationChange()
  })
},

methods: {
  getOrientationChange(event) {
    this.$refs.slider.refresh()
  },
},