Легко. с помощью Jquery. В принципе для Vue примерно все тоже самое, только синтаксис другой
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 это будет будет делаться автоматически
}
}