55 lines
1.2 KiB
Vue
55 lines
1.2 KiB
Vue
<template>
|
|
<div class="range-container">
|
|
<p class="filter-item-paragraph">Precio</p>
|
|
|
|
<q-range
|
|
v-model="rangePriceStore.rangeValue"
|
|
@change="rangePriceStore.handlePriceRange"
|
|
:min="0"
|
|
:max="200"
|
|
color="primary"
|
|
/>
|
|
|
|
<div class="range-price-content">
|
|
<p class="filter-item-paragraph min-price">
|
|
Desde:
|
|
<span class="green-text">{{ rangePriceStore.rangeValue.min }}€</span>
|
|
</p>
|
|
|
|
<p class="filter-item-paragraph max-price">
|
|
Hasta:
|
|
<span class="green-text">{{ rangePriceStore.rangeValue.max }}€</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="js">
|
|
import { useRangePriceStore } from 'src/stores/rangePrice';
|
|
import { defineComponent } from 'vue';
|
|
|
|
export default defineComponent({
|
|
name: 'range-component',
|
|
components: {},
|
|
setup() {
|
|
const rangePriceStore = useRangePriceStore();
|
|
|
|
return { rangePriceStore };
|
|
},
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.range-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
& .range-price-content {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
text-align: center;
|
|
gap: 25px;
|
|
}
|
|
}
|
|
</style>
|