Add rating range field.

examples/pokedex/src/Page/TailwindForm.elm

@@ -42,6 +42,7 @@ type alias User =
     , username : String
     , email : String
     , birthDay : Date
+    , rating : Int
     , notificationPreferences : NotificationPreferences
     }
 
@@ -61,6 +62,7 @@ defaultUser =
     , username = "janedoe"
     , email = "janedoe@example.com"
     , birthDay = Date.fromCalendarDate 1969 Time.Jul 20
+    , rating = 5
     , notificationPreferences =
         { comments = False
         , candidates = False
@@ -253,6 +255,14 @@ form user =
                             DataSource.succeed []
                     )
             )
+        |> Form.with
+            (Form.requiredNumber
+                "rating"
+                (textInput "Rating")
+                |> Form.withMin 1
+                |> Form.withMax 5
+                |> Form.range
+            )
         |> Form.wrap wrapSection
         |> Form.appendForm (|>)
             ((Form.succeed NotificationPreferences

src/Form.elm

@@ -377,6 +377,38 @@ number name toHtmlFn =
         }
 
 
+requiredNumber :
+    String
+    ->
+        ({ toInput : List (Html.Attribute Never)
+         , toLabel : List (Html.Attribute Never)
+         , errors : List String
+         }
+         -> view
+        )
+    -> Field Int view
+requiredNumber name toHtmlFn =
+    Field
+        { name = name
+        , initialValue = Nothing
+        , type_ = "number"
+        , min = Nothing
+        , max = Nothing
+        , required = False
+        , serverValidation = \_ -> DataSource.succeed []
+        , toHtml =
+            \fieldInfo info ->
+                toHtmlFn (toInputRecord name Nothing info fieldInfo)
+        , decode =
+            \rawString ->
+                rawString
+                    |> Maybe.andThen String.toInt
+                    -- TODO this needs to be a Result that can be decoded
+                    |> Maybe.withDefault -1000
+        , properties = []
+        }
+
+
 date :
     String
     ->
@@ -493,6 +525,21 @@ telephone (Field field) =
     Field { field | type_ = "tel" }
 
 
+range : Field value view -> Field value view
+range (Field field) =
+    Field { field | type_ = "range" }
+
+
+search : Field value view -> Field value view
+search (Field field) =
+    Field { field | type_ = "search" }
+
+
+password : Field value view -> Field value view
+password (Field field) =
+    Field { field | type_ = "password" }
+
+
 email : Field value view -> Field value view
 email (Field field) =
     Field { field | type_ = "email" }