50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
<v-row no-gutters justify="center" class="weight-tuner">
|
|
<!-- eslint-disable-next-line -->
|
|
<v-col v-for="(weight, idx) in weights">
|
|
<div class="weight-container">
|
|
<vue-slider
|
|
:value="weight"
|
|
@change="updateWeight(idx, $event)"
|
|
direction="btt"
|
|
:height="100"
|
|
:min="-1"
|
|
:max="1"
|
|
:interval="0.01"
|
|
/>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { usePStore } from "@/store/PolicyStore";
|
|
|
|
import VueSlider from "vue-slider-component";
|
|
import "vue-slider-component/theme/default.css";
|
|
import { computed } from "vue";
|
|
|
|
const store = usePStore();
|
|
|
|
const weights = computed(() => store.weights);
|
|
|
|
const updateWeight = (index, newValue) => {
|
|
const newWeights = weights.value.slice();
|
|
newWeights[index] = newValue;
|
|
store.setWeights(newWeights);
|
|
store.setTrigger();
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.weight-tuner {
|
|
height: 140px;
|
|
}
|
|
.weight-container {
|
|
height: 140px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
</style>
|