1  <script setup lang="ts">
 2  import Slider from './Slider.vue'
 3  import Toggle from './Toggle.vue'
 4  
 5  defineProps<{
 6      mainSliderValue: number
 7      secondarySliderValue: number
 8      enabled: boolean
 9      inputEnabled: boolean  // Add this new prop
10      mainSliderLabel: string
11      secondarySliderLabel: string
12      mainMin: number
13      mainMax: number
14      mainStep: number
15      secondaryMin: number
16      secondaryMax: number
17      secondaryStep: number
18      filterType: string
19  }>()
20  
21  const emit = defineEmits(['update:mainSliderValue', 'update:secondarySliderValue', 'update:enabled', 'updateFilter', 'toggleFilter'])
22  </script>
23  
24  <template>
25      <span class="strip">
26          <!-- Vertical frequency slider -->
27          <Slider :model-value="mainSliderValue" @update:model-value="(value) => {
28              emit('update:mainSliderValue', value);
29              // Always pass both values to ensure filter state is complete
30              emit('updateFilter', {
31                  type: filterType,
32                  value,
33                  secondaryValue: secondarySliderValue
34              });
35          }" :sliderLabel="mainSliderLabel" :min="mainMin" :max="mainMax" :step="mainStep" direction="vertical"
36              :showValue="true" />
37  
38          <!-- Horizontal Q/Gain slider -->
39          <Slider :model-value="secondarySliderValue" @update:model-value="(value) => {
40              emit('update:secondarySliderValue', value);
41              // Always pass both values to ensure filter state is complete
42              emit('updateFilter', {
43                  type: filterType,
44                  value: mainSliderValue,
45                  secondaryValue: value
46              });
47          }" :sliderLabel="secondarySliderLabel" :min="secondaryMin" :max="secondaryMax" :step="secondaryStep"
48              direction="horizontal" :showValue="true" />
49          <Toggle :model-value="enabled" :input-value="inputEnabled" @update:model-value="(value) => {
50              emit('update:enabled', value);
51              emit('toggleFilter', { filterType, value });
52          }" toggleLabel="Enabled" />
53      </span>
54  </template>
55  
56  <style scoped>
57  .strip {
58      margin: 4px;
59      padding: 4px 8px;
60      outline: 1px solid transparent;
61      box-shadow: 0px 1px 3px 1px #000000;
62      display: flex;
63      flex-direction: column;
64      background-color: #E2B241;
65      color: #000;
66  }
67  </style>