Added filter range component. Added age filter.

assets/components/actors/actors.vue

@@ -60,6 +60,32 @@
 
 		<nav class="filter">
 			<ul class="nolist">
+				<li>
+					<Tooltip class="filter boobs">
+						<span
+							class="filter-trigger"
+							:class="{ enabled: ageRequired }"
+						><Icon icon="cake" />Age</span>
+
+						<template v-slot:tooltip>
+							<RangeFilter
+								label="age"
+								:min="18"
+								:max="100"
+								:value="age"
+								:disabled="!ageRequired"
+								:allow-enable="true"
+								@enable="(checked) => updateValue('ageRequired', checked, true)"
+								@input="(range) => updateValue('age', range, false)"
+								@change="(range) => updateValue('age', range, true)"
+							>
+								<template v-slot:start><Icon icon="flower" /></template>
+								<template v-slot:end><Icon icon="pipe" /></template>
+							</RangeFilter>
+						</template>
+					</Tooltip>
+				</li>
+
 				<li>
 					<Tooltip class="filter boobs">
 						<span
@@ -241,6 +267,7 @@ import Actor from './tile.vue';
 import Gender from './gender.vue';
 import Checkbox from '../form/checkbox.vue';
 import Range from '../form/range.vue';
+import RangeFilter from './filter-range.vue';
 import Pagination from '../pagination/pagination.vue';
 
 const toggleValues = [true, null, false];
@@ -255,6 +282,7 @@ function updateFilters() {
 			bs: this.boobSizeRequired ? this.boobSize.join(',') : undefined,
 			h: this.heightRequired ? this.height.join(',') : undefined,
 			w: this.weightRequired ? this.weight.join(',') : undefined,
+			age: this.ageRequired ? this.age.join(',') : undefined,
 		},
 	});
 }
@@ -275,6 +303,7 @@ async function fetchActors(scroll) {
 		pageNumber: Number(this.$route.params.pageNumber) || 1,
 		letter: this.letter.replace('all', ''),
 		gender: curatedGender === 'other' ? null : curatedGender,
+		age: this.ageRequired && this.age,
 		boobSize: this.boobSizeRequired && this.boobSize,
 		naturalBoobs: toggleValues[this.naturalBoobs] ?? null,
 		height: this.heightRequired && this.height,
@@ -317,6 +346,7 @@ export default {
 		Checkbox,
 		Gender,
 		Range,
+		RangeFilter,
 		Pagination,
 	},
 	data() {
@@ -326,6 +356,8 @@ export default {
 			totalCount: 0,
 			limit: 50,
 			letters: ['all'].concat(Array.from({ length: 26 }, (value, index) => String.fromCharCode(index + 97).toUpperCase())),
+			age: this.$route.query.age?.split(',') || [18, 100],
+			ageRequired: !!this.$route.query.age,
 			boobSizes,
 			boobSize: this.$route.query.bs?.split(',') || ['A', 'Z'],
 			boobSizeRequired: !!this.$route.query.bs,

assets/components/actors/filter-range.vue

@@ -0,0 +1,209 @@
+<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
+				class="label-values"
+			>({{ value[0] }} - {{ value[1] }} {{ unit }})</span>
+		</label>
+
+		<span class="filter-split">
+			<Range
+				:min="min"
+				:max="max"
+				:value="value"
+				:disabled="disabled"
+				:allow-enable="true"
+				@enable="$emit('enable', true)"
+				@input="(range) => $emit('input', range)"
+				@change="(range) => $emit('change', range)"
+			>
+				<template v-slot:start><slot name="start" /></template>
+				<template v-slot:end><slot name="end" /></template>
+			</Range>
+		</span>
+	</div>
+</template>
+
+<script>
+import Checkbox from '../form/checkbox.vue';
+import Range from '../form/range.vue';
+
+export default {
+	components: {
+		Checkbox,
+		Range,
+	},
+	props: {
+		label: {
+			type: String,
+			default: null,
+		},
+		value: {
+			type: Array,
+			default: () => [0, 10],
+		},
+		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,
+		},
+	},
+	emits: ['change', 'input', 'enable'],
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.filter-section {
+	width: 15rem;
+	max-width: 100%;
+	border-bottom: solid 1px var(--darken-hint);
+}
+
+.filter-label {
+	display: flex;
+	justify-content: space-between;
+	padding: .75rem .5rem .5rem .5rem;
+	color: var(--darken);
+	font-weight: bold;
+	font-size: .9rem;
+
+	.label {
+		display: inline-flex;
+		align-items: center;
+		text-transform: capitalize;
+	}
+
+	.checkbox {
+		margin: 0 .75rem 0 0;
+	}
+
+	.icon {
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.label-values {
+	font-weight: normal;
+}
+
+.filter-split {
+	display: flex;
+	align-items: center;
+}
+
+.toggle-container,
+.range-container {
+	display: flex;
+	flex-grow: 1;
+	align-items: center;
+	padding: .5rem 0;
+
+	&.on {
+		.toggle-label.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--enabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--enabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--enabled);
+			}
+		}
+	}
+
+	&.off {
+		.toggle-label.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+
+		.toggle {
+			background-color: var(--disabled-background);
+
+			&::-webkit-slider-thumb {
+				background: var(--disabled);
+			}
+
+			&::-moz-range-thumb {
+				background: var(--disabled);
+			}
+		}
+	}
+}
+
+.toggle-label {
+	display: inline-flex;
+	justify-content: center;
+	min-width: 1.5rem;
+	flex-shrink: 0;
+	padding: 0 .5rem;
+	color: var(--darken);
+	font-weight: bold;
+	font-size: .9rem;
+
+	&.on {
+		text-align: right;
+	}
+
+	.icon {
+		fill: var(--darken);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		&.on {
+			color: var(--enabled);
+
+			.icon {
+				fill: var(--enabled);
+			}
+		}
+
+		&.off {
+			color: var(--disabled);
+
+			.icon {
+				fill: var(--disabled);
+			}
+		}
+	}
+}
+</style>