Defined min and max values of input range

lib/livebook/live_markdown/export.ex

@@ -59,6 +59,7 @@ defmodule Livebook.LiveMarkdown.Export do
         name: cell.name,
         value: value
       }
+      |> put_keys_type(cell)
       |> put_truthy(reactive: cell.reactive)
       |> Jason.encode!()
 
@@ -144,4 +145,12 @@ defmodule Livebook.LiveMarkdown.Export do
       end
     end)
   end
+
+  defp put_keys_type(%{type: :range} = cell, data) do
+    cell
+    |> Map.put(:min, data.min)
+    |> Map.put(:max, data.max)
+  end
+
+  defp put_keys_type(cell, _data), do: cell
 end

lib/livebook/live_markdown/import.ex

@@ -202,6 +202,8 @@ defmodule Livebook.LiveMarkdown.Import do
         type: data["type"] |> String.to_existing_atom(),
         name: data["name"],
         value: data["value"],
+        min: data["min"],
+        max: data["max"],
         # Optional flags
         reactive: Map.get(data, "reactive", false)
     }

lib/livebook/notebook/cell/input.ex

@@ -6,7 +6,7 @@ defmodule Livebook.Notebook.Cell.Input do
   # It consists of an input that the user may fill
   # and then read during code evaluation.
 
-  defstruct [:id, :metadata, :type, :name, :value, :reactive]
+  defstruct [:id, :metadata, :type, :name, :value, :min, :max, :reactive]
 
   alias Livebook.Utils
   alias Livebook.Notebook.Cell
@@ -17,6 +17,8 @@ defmodule Livebook.Notebook.Cell.Input do
           type: type(),
           name: String.t(),
           value: String.t(),
+          min: integer(),
+          max: integer(),
           reactive: boolean()
         }
 
@@ -33,6 +35,8 @@ defmodule Livebook.Notebook.Cell.Input do
       type: :text,
       name: "input",
       value: "",
+      min: 0,
+      max: 100,
       reactive: false
     }
   end

lib/livebook_web/helpers.ex

@@ -193,4 +193,22 @@ defmodule LivebookWeb.Helpers do
     </button>
     """
   end
+
+  def render_input_settings(:range, assigns) do
+    ~L"""
+    <div class="flex flex-row">
+      <div class="w-2/4">
+        <div class="input-label">Min</div>
+        <input type="text" class="input" name="min" value="<%= if @min, do: @min, else: 0 %>" spellcheck="false" autocomplete="off" autofocus />
+      </div>
+
+      <div class="w-2/4 ml-3">
+        <div class="input-label">Max</div>
+        <input type="text" class="input" name="max" value="<%= if @max, do: @max, else: 100 %>" spellcheck="false" autocomplete="off" autofocus />
+      </div>
+    </div>
+    """
+  end
+
+  def render_input_settings(_, _assigns), do: ""
 end

lib/livebook_web/live/session_live.ex

@@ -983,6 +983,8 @@ defmodule LivebookWeb.SessionLive do
       input_type: cell.type,
       name: cell.name,
       value: cell.value,
+      min: cell.min,
+      max: cell.max,
       error:
         case Cell.Input.validate(cell) do
           :ok -> nil

lib/livebook_web/live/session_live/cell_component.ex

@@ -128,6 +128,8 @@ defmodule LivebookWeb.SessionLive.CellComponent do
             class={"input w-auto #{if(@cell_view.error, do: "input--error")}"}
             name="value"
             value={@cell_view.value}
+            min={@cell_view.min}
+            max={@cell_view.max}
             phx-debounce="300"
             spellcheck="false"
             autocomplete="off"

lib/livebook_web/live/session_live/input_cell_settings_component.ex

@@ -11,6 +11,8 @@ defmodule LivebookWeb.SessionLive.InputCellSettingsComponent do
       socket
       |> assign(assigns)
       |> assign_new(:name, fn -> cell.name end)
+      |> assign_new(:min, fn -> cell.min end)
+      |> assign_new(:max, fn -> cell.max end)
       |> assign_new(:type, fn -> cell.type end)
       |> assign_new(:reactive, fn -> cell.reactive end)
 
@@ -30,6 +32,9 @@ defmodule LivebookWeb.SessionLive.InputCellSettingsComponent do
             <div class="input-label">Type</div>
             <.select name="type" selected={@type} options={input_types()} />
           </div>
+
+          <%= render_input_settings(@type, assigns) %>
+
           <div>
             <div class="input-label">Name</div>
             <input type="text" class="input" name="name" value={@name} spellcheck="false" autocomplete="off" autofocus />
@@ -66,10 +71,12 @@ defmodule LivebookWeb.SessionLive.InputCellSettingsComponent do
 
   defp params_to_attrs(params) do
     name = params["name"]
+    min = params["min"]
+    max = params["max"]
     type = params["type"] |> String.to_existing_atom()
     reactive = Map.has_key?(params, "reactive")
 
-    %{name: name, type: type, reactive: reactive}
+    %{name: name, min: min, max: max, type: type, reactive: reactive}
   end
 
   defp input_types do