diff --git a/components/actors/actors.vue b/components/actors/actors.vue
index 0f3c298..8c37bb2 100644
--- a/components/actors/actors.vue
+++ b/components/actors/actors.vue
@@ -146,7 +146,8 @@ function updateFilter(prop, value, reload = true) {
rows.map((row) => {
const filter = props.filters[row.key];
const buckets = props.counts?.[row.key] || [];
- const countMax = buckets.at(-1)?.value ?? sliderCap; // buckets are sorted by value
- // at least 1 to keep the slider usable, and never below the active filter so its handles stay in view
- const max = Math.max(1, Math.min(countMax, sliderCap), filter?.min ?? 0, filter?.max ?? 0);
- const value = [filter?.min ?? 0, filter?.max ?? max];
+ // buckets are sorted by value; without aggregations at all, fall back to the full slider
+ const countMax = props.counts ? (buckets.at(-1)?.value ?? 0) : sliderCap;
+ // nothing above 0 to filter for, e.g. no trans performers in any matching scene; an active filter keeps it usable so it can be reset
+ const isEmpty = countMax < 1 && !filter;
+ // collapsed to 0 when empty, otherwise at least 1 so the slider has somewhere to go, and never below the active filter so its handles stay in view
+ const max = isEmpty ? 0 : Math.max(1, Math.min(countMax, sliderCap), filter?.min ?? 0, filter?.max ?? 0);
+ const value = isEmpty ? [0, 0] : [filter?.min ?? 0, filter?.max ?? max];
return {
...row,
max,
+ isEmpty,
isCapped: countMax > max,
value,
display: dragging.value[row.key] || value,
- mountKey: `${row.key}-${max}-${value.join('-')}`, // remount when the range or filter changes, the slider only reads its value on mount
+ mountKey: `${row.key}-${max}-${value.join('-')}-${isEmpty}`, // remount when the range or filter changes, the slider only reads its value on mount
};
}));
@@ -90,6 +94,7 @@ function updateRange(slider, [min, max], reload) {
:min="0"
:max="slider.max"
:value="slider.value"
+ :disabled="slider.isEmpty"
:allow-enable="false"
@input="(range) => updateRange(slider, range, false)"
@change="(range) => updateRange(slider, range, true)"
diff --git a/components/form/range.vue b/components/form/range.vue
index f3a4ddf..fb29c3e 100755
--- a/components/form/range.vue
+++ b/components/form/range.vue
@@ -41,8 +41,9 @@ const range = ref({
const minValue = computed(() => Math.min(range.value.a, range.value.b));
const maxValue = computed(() => Math.max(range.value.a, range.value.b));
-const minPercentage = computed(() => ((minValue.value - props.min) / (props.max - props.min)) * 100);
-const maxPercentage = computed(() => ((maxValue.value - props.min) / (props.max - props.min)) * 100);
+const span = computed(() => props.max - props.min || 1); // a collapsed range (min equals max) would divide by zero
+const minPercentage = computed(() => ((minValue.value - props.min) / span.value) * 100);
+const maxPercentage = computed(() => ((maxValue.value - props.min) / span.value) * 100);
function set(type = 'change') {
if (props.values) {
diff --git a/components/movies/movies.vue b/components/movies/movies.vue
index c080c20..2742e1e 100644
--- a/components/movies/movies.vue
+++ b/components/movies/movies.vue
@@ -188,7 +188,8 @@ function updateFilter(prop, value, reload = true) {
{
>
diff --git a/pages/entities/+Page.vue b/pages/entities/+Page.vue
index 3cae71d..a302614 100644
--- a/pages/entities/+Page.vue
+++ b/pages/entities/+Page.vue
@@ -75,7 +75,8 @@ async function search() {
>
{