Add a dd-range component for repeated checkboxes that represent something like "1/3"

styles/v3/components/range.scss

@@ -0,0 +1,68 @@
+/*
+Disclaimer: This CSS is used by a custom web component and is scoped to JUST
+the corresponding web component. Importing this into other files is forbidden
+*/
+
+@use "../mixins/material";
+@use "./common.scss";
+
+.container {
+	@include material.elevate(4);
+	display: grid;
+	flex-direction: row;
+	gap: 4px;
+	border-radius: 4px;
+	grid-template-columns: minmax(0, 1fr);
+	grid-auto-columns: minmax(0, 1fr);
+	grid-template-rows: 1fr;
+	padding: 4px;
+	box-sizing: border-box;
+}
+
+input {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0,0,0,0);
+	border: 0;
+
+	&:focus ~ .container {
+		@include material.elevate(8)
+	}
+}
+
+.range-increment {
+	grid-row: 1;
+
+	&:empty {
+		@include material.elevate(4);
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		border-radius: 2px;
+		margin: 0;
+		cursor: pointer;
+		width: 1.25rem;
+		height: 1.25rem;
+		position: relative;
+
+		&:hover {
+			@include material.elevate(8);
+		}
+
+		&.filled::before {
+			content: "";
+			background: var(--checkbox-checked);
+			border-radius: 3px;
+			$margin: 4px;
+			top: $margin;
+			bottom: $margin;
+			left: $margin;
+			right: $margin;
+			position: absolute;
+		}
+	}
+}