How to make a range with this thing?

Question

css

How to make it so that its location depends on the entered data?

Answer 1

Make a prop for the component and initialize the component with this prop's in mind. In general
, provide the code, who will help you without it?

Answer 2

Easily. using jquery. In principle, everything is the same for Vue, only the syntax is different.

var my_slider = {
    value: {
        min_range: 10,
        max_range: 20,
        min_value: 0,
        max_value: 50,
        current_value: 15
    },
    set_min_range: function (_new_value) {
        if (_new_value >= this.value.max_range || _new_value < this.value.min_value) {
            return this.value.min_range
        } else {
            this.value.min_range = _new_value;

            if (this.value.current_value < _new_value) {
                this.value.current_value = _new_value;
            }
            return this.value.min_range
        }
    },
    set_max_range: function (_new_value){
        if (_new_value > this.value.max_value || _new_value <= this.value.min_range ) {
            return this.value.max_range
        } else {
            this.value.max_range = _new_value;
            if (this.value.current_value < _new_value) {
                this.value.current_value = _new_value;
            }
            return this.value.max_range
        }
    },
    set_current_value: function(_new_value) {
        if (_new_value < this.value.min_range || _new_value > this.value.max_range) {
            return this.value.current_value
        } else {
            this.value.current_value = _new_value;
            return this.value.current_value
        }
    }
    render: function() {
        // Вот здесь пишите функции для отрисовки HTML элеменитов исходя из
        // значений в словаре this.value . Во VueJS это будет будет делаться автоматически
    }
}