@zeix/ui-element/docs-src/components/my-slider/my-slider.html

UIElement - minimal reactive framework based on Web Components

<my-slider>
	<h2 class="visually-hidden">Slides</h2>
	<div class="slides">
		<div class="slide active">
			<h3>Slide 1</h3>
			<hello-world>
				<label>Your name<br>
					<input type="text">
				</label>
				<p>Hello, <span>World</span>!</p>
			</hello-world>
		</div>
		<div class="slide">
			<h3>Slide 2</h3>
			<spin-button value="0" zero-label="Add to Cart" increment-label="Increment">
				<button type="button" class="decrement" aria-label="Decrement" hidden>−</button>
				<p class="value" hidden>0</p>
				<button type="button" class="increment primary">Add to Cart</button>
			</spin-button>
		</div>
		<div class="slide">
			<h3>Slide 3</h3>
			<rating-feedback>
				<form>
					<rating-stars>
						<fieldset>
							<legend class="visually-hidden">Rate</legend>
							<label>
								<input type="radio" class="visually-hidden" name="rating" value="1">
								<span class="label">☆</span>
							</label>
							<label>
								<input type="radio" class="visually-hidden" name="rating" value="2">
								<span class="label">☆</span>
							</label>
							<label>
								<input type="radio" class="visually-hidden" name="rating" value="3">
								<span class="label">☆</span>
							</label>
							<label>
								<input type="radio" class="visually-hidden" name="rating" value="4">
								<span class="label">☆</span>
							</label>
							<label>
								<input type="radio" class="visually-hidden" name="rating" value="5">
								<span class="label">☆</span>
							</label>
						</fieldset>
					</rating-stars>
					<div class="feedback" hidden>
						<header>
							<button button="button" class="hide" aria-label="Hide">×</button>
							<p hidden>We're sorry to hear that! Your feedback is important, and we'd love to improve. Let us know how we can do better.</p>
							<p hidden>Thank you for your honesty. We appreciate your feedback and will work on making things better.</p>
							<p hidden>Thanks for your rating! If there's anything we can improve, we'd love to hear your thoughts.</p>
							<p hidden>We're glad you had a good experience! If there's anything that could make it even better, let us know.</p>
							<p hidden>Thank you for your support! We're thrilled you had a great experience. Your feedback keeps us motivated!</p>
						</header>
						<fieldset>
							<label for="rating-feedback">Describe your experience (optional)</label>
							<textarea id="rating-feedback"></textarea>
							<input-button disabled>
								<button type="submit" class="primary" disabled>Submit</button>
							</input-button>
						</fieldset>
					</div>
				</form>
			</rating-feedback>
		</div>
	</div>
	<button type="button" class="prev" aria-label="Previous">‹</button>
	<button type="button" class="next" aria-label="Next">›</button>
	<div class="dots">
		<span class="active"></span>
		<span></span>
		<span></span>
	</div>
</my-slider>