Tengo una plantilla con un range para asignar un rango de precio, al cambiar el rango de precio quiero mediante jquery cambiar el valor de las variables minPrice y maxPrice. He intentado mediante dos input, cambiar el valor con jquery y mediante un v-model hacer que ese cambio se translade a vue
<div class="widget-content">
<p>Price</p>
<div class="price search-filter-input">
<div id="slider-range" class="price-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content"><div class="ui-slider-range ui-corner-all ui-widget-header" ></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default"></span></div>
<p class="amount">
<input type="text" id="amount" disabled="">
<input id="minPrice" v-model="minPrice">
<input id="maxPrice" v-model="maxPrice">
</p>
</div>
</div>
Funcion jquery mediante la que cambio el precio
var FilterPrice = function() {
if( $().slider ) {
$( function() {
$( "#slider-range" ).slider({
range: true,
min: 18,
max: 1000,
values: [ 18, 500 ],
slide: function( event, ui ) {
$( "#amount" ).val( ui.values[ 0 ] + "$" + " - " + ui.values[ 1 ] + "$" );
$("#minPrice").val(ui.values[ 0 ]);
$("#maxPrice").val(ui.values[ 1 ]);
}
});
$( "#amount" ).val($( "#slider-range" ).slider( "values", 0 ) + "$" + " - " + $( "#slider-range" ).slider( "values", 1 ) + "$" );
});
}
}; // Filter Price
Script vue con las variables data
<script>
const filtro = new Vue({
el: '#filtro',
data: {
checkedBrands: [],
checkedColor: [],
minPrice: '',
maxPrice: '',
},
})
</script>