fix: support for floating numbers and large numbers on the slider

* feat: add support for floating number
* feat: add dynamic size on slider

src/ui/src/components/core/base/BaseInputRange.vue

@@ -58,16 +58,17 @@ const props = defineProps({
 	},
 });
 
-const model = defineModel("value", { type: Number, default: 50 });
+const model = defineModel("value", { type: String, default: "50" });
 
 const thumbRadius = 9;
 
 const thumb = ref<HTMLElement>();
 const slider = ref<HTMLElement>();
 
 const progress = computed(() => {
-	if (typeof model.value !== "number") return 50;
-	return ((model.value - props.min) / (props.max - props.min)) * 100;
+	const value = parseFloat(model.value);
+	if (typeof value !== "number") return 50;
+	return ((value - props.min) / (props.max - props.min)) * 100;
 });
 
 const isPopoverDisplayed = ref(props.popoverDisplayMode === "always");
@@ -93,15 +94,8 @@ function displayPopover() {
 }
 
 // clamp(0px, calc(62% - 9px), calc(100% - 18px))
-const thumbLeft = computed(
-	() => `clamp(
-		0px,
-		calc(${progress.value}% - ${thumbRadius}px),
-		calc(100% - ${thumbRadius * 2}px)
-	)`,
-);
-
-const popoverLeft = computed(() => `calc(${thumbLeft.value} - 3px)`);
+const thumbLeft = computed(() => `${progress.value}%`);
+const popoverLeft = computed(() => `${progress.value}%`);
 
 function updateValue(value: number) {
 	displayPopover();
@@ -112,8 +106,10 @@ function updateValue(value: number) {
 	const relativeValue = value - props.min;
 	const stepIndex = Math.round(relativeValue / props.step);
 	const roundedValue = props.min + stepIndex * props.step;
+	const precision = Math.ceil(-Math.log10(props.step));
+	const roundedValueString = roundedValue.toFixed(precision);
 
-	if (model.value !== roundedValue) model.value = roundedValue;
+	if (model.value !== roundedValueString) model.value = roundedValueString;
 }
 
 function handleMouseDown(initialEvent: MouseEvent) {
@@ -132,9 +128,7 @@ function handleMouseDown(initialEvent: MouseEvent) {
 
 		if (progress > 1 || progress < 0) return;
 
-		const value = Math.round(
-			(props.max - props.min) * progress + props.min,
-		);
+		const value = (props.max - props.min) * progress + props.min;
 		updateValue(value);
 	}
 
@@ -190,6 +184,7 @@ function handleMouseDown(initialEvent: MouseEvent) {
 	top: 0;
 
 	transition: box-shadow ease-in-out 0.5s;
+	transform: translateX(-50%);
 }
 
 .BaseInputRange__thumb:active {
@@ -212,14 +207,14 @@ function handleMouseDown(initialEvent: MouseEvent) {
 
 	background: var(--popover-bg-color);
 	height: 18px;
-	width: 24px;
-	max-width: 24px;
 
 	border-radius: 4px;
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	padding: 0 4px;
+	transform: translateX(-50%);
 }
 
 .BaseInputRange__popover::after {