ui numerical slider filters

components/ServerDbTable.vue

@@ -299,11 +299,7 @@ function focusedOrBlur(isFocused: boolean) {
 </script>
 <template>
     <v-card flat color="transparent">
-        <v-card-text>
-        </v-card-text>
-        <v-card-text>
             <slot name="numerical-filters" :search="throttleSearch"></slot>
-        </v-card-text>
         <v-data-table-server v-if="!msError" v-model:page="page" color="primary" v-bind="dataTableServerProps"
             v-model:items-per-page="hitsPerPage" v-model:sortBy="sortByRef" v-model:expanded="expanded" fixed-header
             :loading="loading" :items="msResult?.hits ?? []" :items-length="totalHits" density="compact"

components/content/StructureDb.vue

@@ -132,34 +132,49 @@ function pdbNameToCif(pdbPath: string) {
     <ServerDbTable title="Predicted Structures" :sortBy="sortBy" :data-table-server-props="dataTableServerProps"
         :autocomplete-meili-facets-props="computedAutocompleteMeiliFacetsProps" :numerical-filters="numericalFilters">
         <template #numerical-filters="{ search }">
-            <v-row>
-                <v-col cols="12" md="12" lg="4">
-                    <v-range-slider v-model="plddtsRange" strict density="compact" hide-details="auto" label="pLDDT"
-                        step="0.5" :min="0" :max="100" thumb-label="always" @update:modelValue="search()">
-                        <template #append>
-                            <v-btn variant="text" icon="md:restart_alt" @click="plddtsReset()"></v-btn>
-                        </template>
-                    </v-range-slider>
-                </v-col>
-                <v-col cols="12" md="12" lg="4">
-
-                    <v-range-slider v-model="iptmRange" strict density="compact" hide-details="auto" label="iptm+ptm"
-                        step="0.1" :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
-                        <template #append>
-                            <v-btn variant="text" icon="md:restart_alt" @click="iptmReset()"></v-btn>
-                        </template>
-                    </v-range-slider>
-                </v-col>
-                <!-- pdockqReset -->
-                <v-col cols="12" md="12" lg="4">
-                    <v-range-slider v-model="pdockqRange" strict density="compact" hide-details="auto" label="pDockQ"
-                        step="0.1" :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
-                        <template #append>
-                            <v-btn variant="text" icon="md:restart_alt" @click="pdockqReset()"></v-btn>
-                        </template>
-                    </v-range-slider>
-                </v-col>
-            </v-row>
+            <v-list>
+                <v-list-item>
+                    <v-list-item-title class="text-subtitle-1 text-medium-emphasis">
+                        pLDDT
+                    </v-list-item-title>
+                    <v-row>
+                        <v-col class="pt-8 pl-8">
+                            <v-range-slider v-model="plddtsRange" strict density="compact" hide-details="auto" step="0.5"
+                                :min="0" :max="100" thumb-label="always" @update:modelValue="search()">
+                                <template #append>
+                                    <v-btn variant="text" icon="md:restart_alt" @click="plddtsReset()"></v-btn>
+                                </template>
+
+                            </v-range-slider>
+                        </v-col></v-row>
+                </v-list-item>
+                <v-list-item>
+                    <v-list-item-title class="text-subtitle-1 text-medium-emphasis">
+                        iptm+ptm
+                    </v-list-item-title>
+                    <v-row>
+                        <v-col class="pt-8 pl-8">
+                            <v-range-slider v-model="iptmRange" strict density="compact" hide-details="auto" step="0.1"
+                                :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
+                                <template #append>
+                                    <v-btn variant="text" icon="md:restart_alt" @click="iptmReset()"></v-btn>
+                                </template>
+                            </v-range-slider>
+                        </v-col></v-row>
+                </v-list-item>
+                <v-list-item>
+                    <v-list-item-title class="text-subtitle-1 text-medium-emphasis">pDockQ</v-list-item-title>
+                    <v-row>
+                        <v-col class="pt-8 pl-8">
+                            <v-range-slider v-model="pdockqRange" density="compact" strict hide-details="auto" step="0.1"
+                                :min="0" :max="1" thumb-label="always" @update:modelValue="search()">
+                                <template #append>
+                                    <v-btn variant="text" icon="md:restart_alt" @click="pdockqReset()"></v-btn>
+                                </template>
+                            </v-range-slider>
+                        </v-col></v-row>
+                </v-list-item>
+            </v-list>
         </template>
 
         <template #[`item.proteins_in_the_prediction`]="{ item }">