-
Select your monthly bill:
-
R @monthlyBill
+
+
+
+
+
Select your monthly bill:
+
R @monthlyBill
+
+
OR
+
+
Select your monthly electricity usage:
+
@monthlyUsage kWh
+
+
-
OR
-
-
Select your monthly electricity usage:
-
@monthlyUsage kWh
-
-
@@ -136,6 +139,7 @@
private void HandleBillSliderChange(ChangeEventArgs e)
{
+
if (int.TryParse(e.Value!.ToString(), out int newValue))
{
monthlyBill = newValue;
diff --git a/src/apps/blazor-app/wwwroot/css/app.css b/src/apps/blazor-app/wwwroot/css/app.css
index 5901beab..88f6e269 100644
--- a/src/apps/blazor-app/wwwroot/css/app.css
+++ b/src/apps/blazor-app/wwwroot/css/app.css
@@ -2033,12 +2033,6 @@ video {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
-.scale-\[\] {
- --tw-scale-x: ;
- --tw-scale-y: ;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
.-scale-x-100 {
--tw-scale-x: -1;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2553,16 +2547,6 @@ video {
background-color: rgb(255 193 8 / var(--tw-bg-opacity));
}
-.bg-red-400 {
- --tw-bg-opacity: 1;
- background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
-.bg-blue-200 {
- --tw-bg-opacity: 1;
- background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-}
-
.bg-gradient-to-br {
background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
@@ -2779,6 +2763,11 @@ video {
padding-bottom: 1.5rem;
}
+.px-20 {
+ padding-left: 5rem;
+ padding-right: 5rem;
+}
+
.pb-10 {
padding-bottom: 2.5rem;
}
@@ -4634,6 +4623,10 @@ html {
width: 66.666667%;
}
+ .lg\:w-80 {
+ width: 20rem;
+ }
+
.lg\:w-\[30\%\] {
width: 30%;
}
@@ -4643,10 +4636,6 @@ html {
width: fit-content;
}
- .lg\:w-80 {
- width: 20rem;
- }
-
.lg\:flex-1 {
flex: 1 1 0%;
}