hamzus-ui 0.0.68 → 0.0.69

package/index.d.ts

@@ -23,6 +23,7 @@ export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextAre
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Switch/Switch.svelte"
 export { default as InputFile } from "./src/components/hamzus-ui/InputFile/InputFile.svelte"
+export { default as Slider } from "./src/components/hamzus-ui/Slider/Slider.svelte"
 
 // navigation
 export * as Tabs from "./src/components/hamzus-ui/Tabs"

package/index.js

@@ -19,6 +19,7 @@ export { default as TextArea } from "./src/components/hamzus-ui/TextArea/TextAre
 export { default as Checkbox } from "./src/components/hamzus-ui/Checkboxes/Checkbox/Checkbox.svelte"
 export { default as Switch } from "./src/components/hamzus-ui/Switch/Switch.svelte"
 export { default as InputFile } from "./src/components/hamzus-ui/InputFile/InputFile.svelte"
+export { default as Slider } from "./src/components/hamzus-ui/Slider/Slider.svelte"
 
 // navigation
 export * as Tabs from "./src/components/hamzus-ui/Tabs"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hamzus-ui",
-	"version": "0.0.68",
+	"version": "0.0.69",
 	"type": "module",
     "main": "index.js",
     "svelte": "index.js",

package/src/components/hamzus-ui/DropdownMenu/Root.svelte

@@ -9,6 +9,7 @@ import { onDestroy, onMount } from 'svelte';
 	export let direction = 'bottom';
 	export let onOpen = undefined;
     export let avoidOpening = false
+    export let style = ""
 	// locale var
 	let display = false;
 	let exit = false;
@@ -270,12 +271,12 @@ import { onDestroy, onMount } from 'svelte';
 	});
 </script>
 
-<dropdown bind:this={originalParent} style="{triggerFullWidth ? "width:100%;" : ""}" class="parent-popover-hamzus">
+<dropdown bind:this={originalParent} style="{triggerFullWidth ? "width:100%;" : ""} {style}" class="parent-popover-hamzus">
 	<div bind:this={trigger} class="trigger" style="{triggerFullWidth ? "width:100%;" : ""}" on:click={handleDisplay}>
 		<slot name="trigger" />
 	</div>
 	<Portal disabled={!display} target="body">
-        <content-container bind:this={contentContainer}>
+        <content-container bind:this={contentContainer} class="content-container {!display ? "hidden" : ""}">
             <content
                 bind:this={content}
                 class="content content-popover-hamzus"
@@ -306,7 +307,7 @@ import { onDestroy, onMount } from 'svelte';
 		user-select: none;
 		pointer-events: none;
 		opacity: 0;
-		z-index: 2;
+		z-index: 20;
 	}
 
 	.content.exit {

package/src/components/hamzus-ui/Slider/Slider.svelte

@@ -0,0 +1,278 @@
+<script>
+	export let orientation = 'horizontal';
+	export let name = 'slider';
+	export let min = 0;
+	export let max = 100;
+	export let value = 50;
+	export let step = 0.01;
+	export let scaleFactor = 1.4;
+	export let displayStep = false;
+	export let stepWidth = 2;
+	export let stepHeight = 16;
+
+	let slider;
+
+	let isDraging = false;
+
+	let actualX = null;
+	let actualY = null;
+
+	$: percent = getPercentage(min, max, value);
+
+	$: stepValues = getStepValues(min, max, step);
+
+	function getStepValues(min, max, step) {
+		const result = [];
+
+		// Trouver le premier multiple de `step` >= min
+		const first = Math.ceil(min / step) * step;
+
+		for (let val = first; val <= max + step / 10; val += step) {
+            // push le step en pourcent
+			result.push(parseFloat(((val - min) / (max - min) * 100).toFixed(10)));
+		}
+        // si il n y a pas zero et 100 on le push
+        if (!result.includes(0)) {
+            result.push(0)
+        }
+        if (!result.includes(100)) {
+            result.push(100)
+        }
+
+		return result;
+	}
+
+	function getPercentage(min, max, value) {
+		let maxFromZero = max - min;
+
+		let ratio = (value - min) / maxFromZero;
+
+		return ratio * 100;
+	}
+
+	function handleClickDown(event) {
+        event.preventDefault()
+
+		isDraging = true;
+
+		actualX = event.clientX;
+		actualY = event.clientY;
+
+		// calculer la nouvelle valeur en fonction de la position du curseur
+		updateValue();
+
+		document.addEventListener('mousemove', handleUpdateCursorState);
+		document.addEventListener('mouseup', handleClickUp);
+	}
+
+	function handleUpdateCursorState(event) {
+		actualX = event.clientX;
+		actualY = event.clientY;
+
+		updateValue();
+	}
+
+	function handleClickUp() {
+		isDraging = false;
+
+		actualX = null;
+		actualY = null;
+
+		document.removeEventListener('mouseup', handleClickUp);
+		document.removeEventListener('mousemove', handleUpdateCursorState);
+	}
+
+	function updateValue() {
+		// mettre a jour la valeur en fonction de la position
+
+		let sliderSize = slider[orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight']; // taille du slider
+
+		let sliderOffset =
+			slider.getBoundingClientRect()[orientation === 'horizontal' ? 'left' : 'top']; // position de depart du slider dans la vue
+
+		let movementRelativeToSlider =
+			(orientation === 'horizontal' ? actualX : actualY) - sliderOffset; // mouvement en pixel par rapport a la position de depart du slider
+
+		let ratioMovement = movementRelativeToSlider / sliderSize;
+
+		// inverser le ratio car le slider vertical demarre d en bas
+		if (orientation === 'vertical') {
+			ratioMovement = 1 - ratioMovement;
+		}
+
+		// convertir le pourcentage en valeur en fonction du min et max
+		let maxFromZero = max - min;
+
+		let newPercentFromZero = ratioMovement * maxFromZero;
+
+        
+		let newValue = Math.round((newPercentFromZero + min) / step) * step;
+        
+        // si le nouveau pourcentage est plus pres de 100% que le pourcentage de la nouvelleValeur on met a 100 et inversement pour 0
+        let newValuePercent = getPercentage(min, max, newValue)
+
+        if (Math.abs(newPercentFromZero - newValuePercent) > Math.abs(newPercentFromZero - 100)) {
+            newValue = max
+        }
+
+        if (Math.abs(newPercentFromZero - newValuePercent) > Math.abs(newPercentFromZero - 0)) {
+            newValue = min
+        }
+
+		if (newValue > max) {
+			newValue = max;
+		}
+
+		if (newValue < min) {
+			newValue = min;
+		}
+
+		value = newValue;
+	}
+</script>
+
+<div
+	class="slider-container {orientation === 'horizontal' ? 'horizontal' : 'vertical'}"
+	style="--step-width:{stepWidth}px;--step-height:{stepHeight}px;"
+>
+	<input type="hidden" {name} {value} />
+	<div
+		bind:this={slider}
+		on:mousedown={handleClickDown}
+		class="slider {isDraging ? 'hover' : ''}"
+		style="--scale-factor:{scaleFactor};"
+	>
+		<span class="progress" style="--progress:{percent}%;"></span>
+		<span class="track" style="--progress:{percent}%;"></span>
+	</div>
+	{#if displayStep}
+		<!-- parcourir les step du min au max -->
+		{#each stepValues as stepValue}
+			<span class="step" style="--offset:{stepValue}%;"></span>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.slider-container {
+		display: flex;
+		position: relative;
+	}
+	.slider-container.horizontal {
+		width: 100%;
+		height: 7px;
+		align-items: center;
+	}
+
+	.slider-container.vertical {
+		width: 7px;
+		height: 100%;
+		justify-content: center;
+	}
+
+	.slider {
+		background-color: var(--accent-b);
+		display: flex;
+		border-radius: 100px;
+		outline: 3px solid var(--bg-blur);
+		cursor: pointer;
+		position: relative;
+
+		transition-property: height, width;
+		transition-duration: 0.1s;
+		transition-timing-function: ease-out;
+	}
+
+	.horizontal .slider {
+		width: 100%;
+		height: 5px;
+	}
+	.horizontal .slider.hover,
+	.horizontal .slider:hover {
+		height: 7px;
+		/* transform: scaleY(var(--scale-factor)); */
+	}
+
+	.vertical .slider {
+		width: 5px;
+		height: 100%;
+		align-items: end;
+	}
+	.vertical .slider.hover,
+	.vertical .slider:hover {
+		width: 7px;
+		/* transform: scaleX(var(--scale-factor)); */
+	}
+	.slider::after {
+		content: '';
+		position: absolute;
+		top: -7px;
+		left: -7px;
+		width: calc(100% + 14px);
+		height: calc(100% + 14px);
+	}
+
+	.progress {
+		background-color: var(--accent);
+		border-radius: 3px;
+		z-index: 2;
+	}
+	.horizontal .progress {
+		width: var(--progress);
+		height: 100%;
+	}
+	.vertical .progress {
+		width: 100%;
+		height: var(--progress);
+	}
+
+	.track {
+		z-index: 3;
+		width: 12px;
+		height: 12px;
+		border-radius: 12.5px;
+		background-color: var(--bg-1);
+		border: 1px solid var(--stroke);
+		/* outline: 2px solid var(--bg-blur); */
+		position: absolute;
+		transition-property: width, height;
+		transition-duration: 0.1s;
+		transition-timing-function: ease-out;
+	}
+	.horizontal .track {
+		left: var(--progress);
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+	.vertical .track {
+		bottom: var(--progress);
+		left: 50%;
+		transform: translate(-50%, 50%);
+	}
+	.slider-container:has(.slider.hover) .track,
+	.slider-container:hover .track {
+		width: 16px;
+		height: 16px;
+		outline: 2px solid var(--bg-blur);
+	}
+
+	.step {
+		background-color: var(--bg-2);
+		border-radius: 700px;
+		position: absolute;
+		z-index: 1;
+	}
+
+	.horizontal .step {
+		width: var(--step-width);
+		height: var(--step-height);
+		transform: translateX(-50%);
+		left: var(--offset);
+	}
+	.vertical .step {
+		width: var(--step-height);
+		height: var(--step-width);
+		transform: translateY(50%);
+		bottom: var(--offset);
+	}
+</style>

package/src/components/hamzus-ui/Slider copy/Slider.svelte

@@ -0,0 +1,276 @@
+<script>
+	export let orientation = 'horizontal';
+	export let name = 'slider';
+	export let min = 0;
+	export let max = 100;
+	export let value = 50;
+	export let step = 0.01;
+	export let scaleFactor = 1.4;
+	export let displayStep = false;
+	export let stepWidth = 2;
+	export let stepHeight = 16;
+
+	let slider;
+
+	let isDraging = false;
+
+	let actualX = null;
+	let actualY = null;
+
+	$: percent = getPercentage(min, max, value);
+
+	$: stepValues = getStepValues(min, max, step);
+
+	function getStepValues(min, max, step) {
+		const result = [];
+
+		// Trouver le premier multiple de `step` >= min
+		const first = Math.ceil(min / step) * step;
+
+		for (let val = first; val <= max + step / 10; val += step) {
+            // push le step en pourcent
+			result.push(parseFloat(((val - min) / (max - min) * 100).toFixed(10)));
+		}
+        // si il n y a pas zero et 100 on le push
+        if (!result.includes(0)) {
+            result.push(0)
+        }
+        if (!result.includes(100)) {
+            result.push(100)
+        }
+
+		return result;
+	}
+
+	function getPercentage(min, max, value) {
+		let maxFromZero = max - min;
+
+		let ratio = (value - min) / maxFromZero;
+
+		return ratio * 100;
+	}
+
+	function handleClickDown(event) {
+		isDraging = true;
+
+		actualX = event.clientX;
+		actualY = event.clientY;
+
+		// calculer la nouvelle valeur en fonction de la position du curseur
+		updateValue();
+
+		document.addEventListener('mousemove', handleUpdateCursorState);
+		document.addEventListener('mouseup', handleClickUp);
+	}
+
+	function handleUpdateCursorState(event) {
+		actualX = event.clientX;
+		actualY = event.clientY;
+
+		updateValue();
+	}
+
+	function handleClickUp() {
+		isDraging = false;
+
+		actualX = null;
+		actualY = null;
+
+		document.removeEventListener('mouseup', handleClickUp);
+		document.removeEventListener('mousemove', handleUpdateCursorState);
+	}
+
+	function updateValue() {
+		// mettre a jour la valeur en fonction de la position
+
+		let sliderSize = slider[orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight']; // taille du slider
+
+		let sliderOffset =
+			slider.getBoundingClientRect()[orientation === 'horizontal' ? 'left' : 'top']; // position de depart du slider dans la vue
+
+		let movementRelativeToSlider =
+			(orientation === 'horizontal' ? actualX : actualY) - sliderOffset; // mouvement en pixel par rapport a la position de depart du slider
+
+		let ratioMovement = movementRelativeToSlider / sliderSize;
+
+		// inverser le ratio car le slider vertical demarre d en bas
+		if (orientation === 'vertical') {
+			ratioMovement = 1 - ratioMovement;
+		}
+
+		// convertir le pourcentage en valeur en fonction du min et max
+		let maxFromZero = max - min;
+
+		let newPercentFromZero = ratioMovement * maxFromZero;
+
+        
+		let newValue = Math.round((newPercentFromZero + min) / step) * step;
+        
+        // si le nouveau pourcentage est plus pres de 100% que le pourcentage de la nouvelleValeur on met a 100 et inversement pour 0
+        let newValuePercent = getPercentage(min, max, newValue)
+
+        if (Math.abs(newPercentFromZero - newValuePercent) > Math.abs(newPercentFromZero - 100)) {
+            newValue = max
+        }
+
+        if (Math.abs(newPercentFromZero - newValuePercent) > Math.abs(newPercentFromZero - 0)) {
+            newValue = min
+        }
+
+		if (newValue > max) {
+			newValue = max;
+		}
+
+		if (newValue < min) {
+			newValue = min;
+		}
+
+		value = newValue;
+	}
+</script>
+
+<div
+	class="slider-container {orientation === 'horizontal' ? 'horizontal' : 'vertical'}"
+	style="--step-width:{stepWidth}px;--step-height:{stepHeight}px;"
+>
+	<input type="hidden" {name} {value} />
+	<div
+		bind:this={slider}
+		on:mousedown={handleClickDown}
+		class="slider {isDraging ? 'hover' : ''}"
+		style="--scale-factor:{scaleFactor};"
+	>
+		<span class="progress" style="--progress:{percent}%;"></span>
+		<span class="track" style="--progress:{percent}%;"></span>
+	</div>
+	{#if displayStep}
+		<!-- parcourir les step du min au max -->
+		{#each stepValues as stepValue}
+			<span class="step" style="--offset:{stepValue}%;"></span>
+		{/each}
+	{/if}
+</div>
+
+<style>
+	.slider-container {
+		display: flex;
+		position: relative;
+	}
+	.slider-container.horizontal {
+		width: 100%;
+		height: 7px;
+		align-items: center;
+	}
+
+	.slider-container.vertical {
+		width: 7px;
+		height: 100%;
+		justify-content: center;
+	}
+
+	.slider {
+		background-color: var(--accent-b);
+		display: flex;
+		border-radius: 100px;
+		outline: 3px solid var(--bg-blur);
+		cursor: pointer;
+		position: relative;
+
+		transition-property: height, width;
+		transition-duration: 0.1s;
+		transition-timing-function: ease-out;
+	}
+
+	.horizontal .slider {
+		width: 100%;
+		height: 5px;
+	}
+	.horizontal .slider.hover,
+	.horizontal .slider:hover {
+		height: 7px;
+		/* transform: scaleY(var(--scale-factor)); */
+	}
+
+	.vertical .slider {
+		width: 5px;
+		height: 100%;
+		align-items: end;
+	}
+	.vertical .slider.hover,
+	.vertical .slider:hover {
+		width: 7px;
+		/* transform: scaleX(var(--scale-factor)); */
+	}
+	.slider::after {
+		content: '';
+		position: absolute;
+		top: -7px;
+		left: -7px;
+		width: calc(100% + 14px);
+		height: calc(100% + 14px);
+	}
+
+	.progress {
+		background-color: var(--accent);
+		border-radius: 3px;
+		z-index: 2;
+	}
+	.horizontal .progress {
+		width: var(--progress);
+		height: 100%;
+	}
+	.vertical .progress {
+		width: 100%;
+		height: var(--progress);
+	}
+
+	.track {
+		z-index: 3;
+		width: 12px;
+		height: 12px;
+		border-radius: 12.5px;
+		background-color: var(--bg-1);
+		border: 1px solid var(--stroke);
+		/* outline: 2px solid var(--bg-blur); */
+		position: absolute;
+		transition-property: width, height;
+		transition-duration: 0.1s;
+		transition-timing-function: ease-out;
+	}
+	.horizontal .track {
+		left: var(--progress);
+		top: 50%;
+		transform: translate(-50%, -50%);
+	}
+	.vertical .track {
+		bottom: var(--progress);
+		left: 50%;
+		transform: translate(-50%, 50%);
+	}
+	.slider-container:has(.slider.hover) .track,
+	.slider-container:hover .track {
+		width: 16px;
+		height: 16px;
+		outline: 2px solid var(--bg-blur);
+	}
+
+	.step {
+		background-color: var(--bg-2);
+		border-radius: 700px;
+		position: absolute;
+		z-index: 1;
+	}
+
+	.horizontal .step {
+		width: var(--step-width);
+		height: var(--step-height);
+		transform: translateX(-50%);
+		left: var(--offset);
+	}
+	.vertical .step {
+		width: var(--step-height);
+		height: var(--step-width);
+		transform: translateY(50%);
+		bottom: var(--offset);
+	}
+</style>

package/src/components/hamzus-ui/Slider copy/slider/+page.svelte

@@ -0,0 +1,49 @@
+
+<script>
+	import Slider from "@hamzus-ui/Slider/Slider.svelte";
+    import Exemple from "../../../../components/docComponent/Exemple/Exemple.svelte";
+	import DataList from "@hamzus-ui/DataList/DataList.svelte";
+	import CopyCode from "@hamzus-ui/CopyCode/CopyCode.svelte";
+</script>
+
+<h2>Carte informatif</h2>
+
+<h3>Import</h3>
+
+<CopyCode label={`import { Slider } from  "hamzus-ui"`}></CopyCode>
+
+<h3>Exemple</h3>
+
+<Exemple code={'<Slider></Slider>'}>
+    <div class="exemple">
+        <Slider></Slider>
+    </div>
+</Exemple>
+
+<h3>Minimum/Maximum</h3>
+<Exemple code={'<Slider step={25} displayStep></Slider>'}>
+    <div class="exemple">
+        <Slider step={25} min={10} max={110} displayStep></Slider>
+    </div>
+</Exemple>
+
+<h3>Etape</h3>
+<Exemple code={'<Slider step={25} displayStep></Slider>'}>
+    <div class="exemple">
+        <Slider step={25} displayStep></Slider>
+    </div>
+</Exemple>
+
+<h3>Orientation (vertical)</h3>
+<Exemple code={'<Slider step={50} displayStep orientation="vertical"></Slider>'}>
+    <div class="exemple" style="height: 60px;">
+        <Slider step={50} displayStep orientation='vertical'></Slider>
+    </div>
+</Exemple>
+
+<h3>Step size</h3>
+<Exemple code={'<Slider step={50} stepWidth={8} stepHeight={20} displayStep></Slider>'}>
+    <div class="exemple">
+        <Slider step={50} stepWidth={8} stepHeight={20} displayStep></Slider>
+    </div>
+</Exemple>

package/src/components/hamzus-ui/SoundTrackSlider/SoundTrack.svelte

@@ -0,0 +1,226 @@
+<script>
+	export let orientation = 'horizontal';
+	export let name = 'slider';
+	export let min = 0;
+	export let max = 60;
+	export let value = 50;
+	export let step = 1;
+	export let label = 'Al Fatiha';
+
+	let slider;
+
+	let isDraging = false;
+
+	let actualX = null;
+	let actualY = null;
+
+	let startLabel = '';
+	let endLabel = '';
+
+	$: percent = getPercentage(min, max, value);
+
+    $: {
+        startLabel = formatSeconds(value)
+        endLabel = '- ' + formatSeconds(max - value)
+    }
+
+	function getPercentage(min, max, value) {
+
+		let maxFromZero = max - min;
+
+		let ratio = (value - min) / maxFromZero;
+
+		return ratio * 100;
+	}
+
+	function formatSeconds(seconds) {
+		const minutes = Math.floor(seconds / 60);
+		const secs = Math.floor(seconds % 60);
+		return `${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+	}
+
+	function handleClickDown(event) {
+        event.preventDefault()
+		isDraging = true;
+
+		actualX = event.clientX;
+		actualY = event.clientY;
+
+		// calculer la nouvelle valeur en fonction de la position du curseur
+		updateValue();
+
+		document.addEventListener('mousemove', handleUpdateCursorState);
+		document.addEventListener('mouseup', handleClickUp);
+	}
+
+	function handleUpdateCursorState(event) {
+		actualX = event.clientX;
+		actualY = event.clientY;
+
+		updateValue();
+	}
+
+	function handleClickUp() {
+		isDraging = false;
+
+		actualX = null;
+		actualY = null;
+
+		document.removeEventListener('mouseup', handleClickUp);
+		document.removeEventListener('mousemove', handleUpdateCursorState);
+	}
+
+	function updateValue() {
+		// mettre a jour la valeur en fonction de la position
+
+		let sliderSize = slider[orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight']; // taille du slider
+
+		let sliderOffset =
+			slider.getBoundingClientRect()[orientation === 'horizontal' ? 'left' : 'top']; // position de depart du slider dans la vue
+
+		let movementRelativeToSlider =
+			(orientation === 'horizontal' ? actualX : actualY) - sliderOffset; // mouvement en pixel par rapport a la position de depart du slider
+
+		let ratioMovement = movementRelativeToSlider / sliderSize;
+
+		// inverser le ratio car le slider vertical demarre d en bas
+		if (orientation === 'vertical') {
+			ratioMovement = 1 - ratioMovement;
+		}
+
+		// convertir le pourcentage en valeur en fonction du min et max
+		let maxFromZero = max - min;
+
+		let newPercentFromZero = ratioMovement * maxFromZero;
+
+		let newValue = Math.round((newPercentFromZero + min) / step) * step;
+
+		// si le nouveau pourcentage est plus pres de 100% que le pourcentage de la nouvelleValeur on met a 100 et inversement pour 0
+		let newValuePercent = getPercentage(min, max, newValue);
+
+		if (newValue > max) {
+			newValue = max;
+		}
+
+		if (newValue < min) {
+			newValue = min;
+		}
+        
+
+		value = newValue;
+	}
+</script>
+
+<div class="slider-container {orientation === 'horizontal' ? 'horizontal' : 'vertical'}">
+	<input type="hidden" {name} {value} />
+	<div bind:this={slider} on:mousedown={handleClickDown} class="slider {isDraging ? 'hover' : ''}">
+		<span class="progress" style="--progress:{percent}%;"></span>
+		<!-- <span class="track" style="--progress:{percent}%;"></span> -->
+		<h5 class="label">{label}</h5>
+		<h5
+			class="label top"
+			style="mask-image: linear-gradient(to right, black {percent}%, transparent {percent}%);
+      -webkit-mask-image: linear-gradient(to right, black {percent}%, transparent {percent}%);"
+		>
+			{label}
+		</h5>
+
+		<h5 class="start">{startLabel}</h5>
+		<h5 class="end">{endLabel}</h5>
+	</div>
+</div>
+
+<style>
+	.slider-container {
+		display: flex;
+		position: relative;
+	}
+	.slider-container.horizontal {
+		width: 100%;
+		height: 25px;
+		align-items: center;
+	}
+
+	.slider-container.vertical {
+		width: 25px;
+		height: 100%;
+		justify-content: center;
+	}
+
+	.slider {
+		background-color: var(--bg-3);
+		display: flex;
+		border-radius: var(--radius-m);
+		cursor: pointer;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.horizontal .slider {
+		width: 100%;
+		height: calc(25px - 2px);
+	}
+
+	.vertical .slider {
+		width: calc(25px - 2px);
+		height: 100%;
+		align-items: end;
+	}
+	.slider::after {
+		content: '';
+		position: absolute;
+		top: -7px;
+		left: -7px;
+		width: calc(100% + 14px);
+		height: calc(100% + 14px);
+	}
+
+	.progress {
+		background-color: var(--accent);
+		border-radius: var(--radius-s) var(--radius-xs) var(--radius-xs) var(--radius-s);
+		z-index: 2;
+	}
+	.horizontal .progress {
+		width: var(--progress);
+		height: 100%;
+	}
+	.vertical .progress {
+		width: 100%;
+		height: var(--progress);
+	}
+
+	.label {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		z-index: 1;
+		color: var(--font-1);
+		user-select: none;
+		pointer-events: none;
+		width: 100%;
+		text-align: center;
+	}
+	.label.top {
+		z-index: 2;
+		color: var(--white);
+	}
+
+    .start,
+    .end {
+        position: absolute;
+        z-index:3;
+        user-select: none;
+        pointer-events: none;
+        color:var(--white);
+        top: 50%;
+        transform: translateY(-50%);
+
+    }
+    .start {
+        left: var(--pad-m);
+    }
+    .end {
+        right: var(--pad-m);
+    }
+</style>