diff --git a/src/routes/docs/get-started.svelte b/src/routes/docs/get-started.svelte
index 44a9fde..bda81a5 100644
--- a/src/routes/docs/get-started.svelte
+++ b/src/routes/docs/get-started.svelte
@@ -61,6 +61,7 @@
 			style="--range-handle-focus:#ed225d; --range-handle:#ed225daa; --range-handle-inactive:#ed225d;"
 		>
 			<RangeSlider
+				id="get-started-sketch-range"
 				bind:values={dimensions}
 				min={100}
 				max={1000}
@@ -68,7 +69,7 @@
 				pips
 				pipstep={100}
 				all="label"
-				id="slider"
+				hoverable
 			/>
 		</div>
 	</section>
@@ -81,4 +82,15 @@
 	code {
 		@apply bg-gray-700 py-0.5 px-1 rounded;
 	}
-</style>
\ No newline at end of file
+	:global(#get-started-sketch-range.rangeSlider .rangeHandle:nth-of-type(1) .rangeNub:before),
+	:global(#get-started-sketch-range.rangeSlider .rangeHandle:nth-of-type(2) .rangeNub:before) {
+		content: 'x';
+		@apply text-white;
+	}
+	:global(#get-started-sketch-range.rangeSlider .rangeHandle:nth-of-type(2) .rangeNub:before) {
+		content: 'y';
+	}
+	:global(#get-started-sketch-range.rangeSlider .rangeNub) {
+		@apply text-center text-xs font-mono leading-5;
+	}
+</style>
diff --git a/src/routes/examples/__layout.svelte b/src/routes/examples/__layout.svelte
index c1fb555..36b00ce 100644
--- a/src/routes/examples/__layout.svelte
+++ b/src/routes/examples/__layout.svelte
@@ -33,4 +33,4 @@
 			<slot />
 		</div>
 	</div>
-</MainContainer>
\ No newline at end of file
+</MainContainer>