Merge pull request #572 from madeindjs/fix-slider

fix(ui): fix number format for the input slider
writer · Oct 14, 2024 · 1f557a9 · 1f557a9
2 parents eb03f8f + f7b620e
commit 1f557a9
Showing 1 changed file with 7 additions and 2 deletions.
diff --git a/src/ui/src/components/core/base/BaseInputRange.vue b/src/ui/src/components/core/base/BaseInputRange.vue
@@ -65,8 +65,11 @@ const thumbRadius = 9;
 const thumb = ref<HTMLElement>();
 const slider = ref<HTMLElement>();
 
-const precision = computed(() => Math.ceil(-Math.log10(props.step)));
-const displayValue = computed(() => model.value.toFixed(precision.value));
+const precision = computed(() => String(props.step).split(".")[1]?.length ?? 0);
+const displayValue = computed(() => {
+	if (typeof model.value !== "number") return "";
+	return Number(model.value).toFixed(precision.value);
+});
 
 const progress = computed(() => {
 	if (typeof model.value !== "number") return 50;
@@ -215,6 +218,8 @@ function handleMouseDown(initialEvent: MouseEvent) {
 	justify-content: center;
 	padding: 0 4px;
 	transform: translateX(-50%);
+
+	min-width: 12px;
 }
 
 .BaseInputRange__popover::after {