Merge branch 'master' of https://github.com/coinos/coinos-ui into notificationsnotifications

1 files changed, 56 insertions, 0 deletions

diff --git a/src/components/Slider.svelte b/src/components/Slider.svelte
new file mode 100644
index 00000000..3c94d127
--- /dev/null
+++ b/src/components/Slider.svelte
@@ -0,0 +1,56 @@
+<script>
+	export let value,
+		handle,
+		min = 0,
+		max = 100;
+</script>
+
+<input
+	id="slider"
+	type="range"
+	{min}
+	{max}
+	bind:value
+	class="px-0 py-0 my-5"
+	style="--bgPercent: {((value - min) * 100) / (max - min)}%;"
+	on:input={handle}
+/>
+
+<style>
+	#slider {
+		-webkit-appearance: none;
+		width: 100%;
+		height: 6px;
+		border-radius: 5px;
+		background: linear-gradient(
+			to right,
+			black 0%,
+			black var(--bgPercent),
+			#f5f7fa var(--bgPercent),
+			#f5f7fa 100%
+		);
+		outline: none;
+	}
+
+	#slider:active {
+		background-color: black;
+	}
+
+	#slider::-webkit-slider-thumb {
+		-webkit-appearance: none;
+		appearance: none;
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+
+	#slider::-moz-range-thumb {
+		width: 30px;
+		height: 30px;
+		border-radius: 50%;
+		background: black;
+		cursor: pointer;
+	}
+</style>