Allow users to zoom an image using a range slider

[tborges]

First of all, thanks for the Vue-Cropperjs plugging!

How can I allow users to zoom an image using a range slider? Like this gif below...

Reading more about it, I saw another pluging (vue-cropper) and they mentioned something like this below, but I didn't get it. Here is a link for their post this.$refs.cropper.changeScale(1) can enlarge image this.$refs.cropper.changeScale(-1) can narrow image this.$refs.cropper.scale can get the current zoom ratio of the image

I came up with this below but is not working properly.

<template>
    <vue-cropper
        ref="cropper"
        :aspect-ratio="1 / 1"
        :src="imgSrc"
        preview=".preview"
        style="height: 300px"
    />

    // Range slider
    <b-col cols="10">
        <b-form-input
            id="range-2"
            v-model="value"
            type="range"
            min="0"
            max="100"
            step="1"
            @click.prevent="changeScale($event)"
        ></b-form-input>
    </b-col>
</template>

methods:{
        changeScale(event) {
            var x = event.pageX;
            this.$refs.cropper.relativeZoom(x);
            console.log(x);
        },
}

[Agontuk]

you can use relativeZoom (relative) or zoomTo (absolute) method. It depends on the slider value you're getting.

[arpita0408]

hello, how to bind slider to vue-cropper js?