<template> <div class="filter-section"> <label class="filter-label noselect"> <span class="label"> <Checkbox :checked="!disabled" class="checkbox" @change="(checked) => $emit('enable', checked)" />{{ label }} </span> <span v-if="!disabled" class="label-values" >{{ value[0] }} - {{ value[1] }}<template v-if="unit"> {{ unit }}</template></span> </label> <span class="filter-split"> <Range :min="min" :max="max" :value="value" :values="values" :disabled="disabled" :allow-enable="allowEnable" @enable="emit('enable', true)" @input="(range) => emit('input', range)" @change="(range) => emit('change', range)" > <template #start><slot name="start" /></template> <template #end><slot name="end" /></template> </Range> </span> </div> </template> <script setup> import Checkbox from '../form/checkbox.vue'; import Range from '../form/range.vue'; defineProps({ label: { type: String, default: null, }, value: { type: Array, default: () => [0, 10], }, values: { type: Array, default: null, }, min: { type: Number, default: 0, }, max: { type: Number, default: 10, }, unit: { type: String, default: null, }, disabled: { type: Boolean, default: false, }, allowEnable: { type: Boolean, default: true, }, }); const emit = defineEmits(['change', 'input', 'enable']); </script>