<script lang="ts">
	export let min = 0;
	export let max = 100;
	export let value = 50;
</script>

<div class="wrapper">
	<input type="range" {min} {max} bind:value step={10} />
	<p class="left">gar nicht</p>
	<p class="right">sehr</p>
</div>

<style>
	.left,
	.right {
		position: absolute;
		font-size: 0.6em;
		top: 32px;
	}

	.right {
		right: 0px;
	}

	.wrapper {
		position: relative;
		margin-block: 20px;
	}

	input[type='range'] {
		position: relative;
		height: 32px;
		appearance: none;
		margin: 10px 0;
		width: 100%;
		background: transparent;
	}
	input[type='range']:focus {
		outline: none;
	}
	input[type='range']::-webkit-slider-runnable-track {
		width: 100%;
		height: 3px;
		cursor: pointer;
		animate: 0.2s;
		box-shadow: 0px 0px 0px #000000;
		background: #b5a446;
		border-radius: 29px;
		border: 0px solid #010101;
	}
	input[type='range']::-webkit-slider-thumb {
		box-shadow: 0px 0px 0px #000031;
		border: 0px solid #00001e;
		height: 40px;
		width: 26px;
		border-radius: 26px;
		background: #ffffff;
		cursor: pointer;
		-webkit-appearance: none;
		margin-top: -18px;

		background: url(/cursor.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 77%;
	}
	input[type='range']:focus::-webkit-slider-runnable-track {
		background: #d9c556;
	}
	input[type='range']::-moz-range-track {
		width: 100%;
		height: 3px;
		cursor: pointer;
		animate: 0.2s;
		box-shadow: 0px 0px 0px #000000;
		background: #b5a446;
		border-radius: 29px;
		border: 0px solid #010101;
	}
	input[type='range']::-moz-range-thumb {
		box-shadow: 0px 0px 0px #000031;
		border: 0px solid #00001e;
		height: 40px;
		width: 26px;
		background: #ffffff;
		background: red;
		cursor: pointer;
		background: url(/cursor.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 77%;
	}
	input[type='range']::-ms-track {
		width: 100%;
		height: 3px;
		cursor: pointer;
		animate: 0.2s;
		background: transparent;
		border-color: transparent;
		color: transparent;
		background: url(/cursor.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 77%;
	}
	input[type='range']::-ms-fill-lower {
		background: #d9c556;
		border: 0px solid #010101;
		border-radius: 58px;
		box-shadow: 0px 0px 0px #000000;
	}
	input[type='range']::-ms-fill-upper {
		background: #d9c556;
		border: 0px solid #010101;
		border-radius: 58px;
		box-shadow: 0px 0px 0px #000000;
	}
	input[type='range']::-ms-thumb {
		margin-top: 1px;
		box-shadow: 0px 0px 0px #000031;
		border: 0px solid #00001e;
		height: 26px;
		width: 26px;
		border-radius: 26px;
		background: #ffffff;
		cursor: pointer;
		background: url(/cursor.svg);
		background-position: center;
		background-repeat: no-repeat;
		background-size: 77%;
	}
	input[type='range']:focus::-ms-fill-lower {
		background: #d9c556;
	}
	input[type='range']:focus::-ms-fill-upper {
		background: #d9c556;
	}
</style>
