diff --git a/assets/css/components.css b/assets/css/components.css index e9c9ad0f1..820e3bdf9 100644 --- a/assets/css/components.css +++ b/assets/css/components.css @@ -79,6 +79,24 @@ @apply py-0 w-16; } + .input[type="range"] { + @apply outline-none appearance-none bg-gray-200 border-none; + padding: 0; + height: 15px; + } + + .input[type="range"]::-webkit-slider-thumb { + width: 22px; + height: 22px; + @apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl; + } + + .input[type="range"]::-moz-range-thumb { + width: 22px; + height: 22px; + @apply appearance-none border-transparent bg-blue-600 hover:bg-blue-700 cursor-pointer rounded-xl; + } + .input--error { @apply bg-red-50 border-red-600 text-red-600; } diff --git a/lib/livebook/notebook/cell/input.ex b/lib/livebook/notebook/cell/input.ex index 1161ab448..6e3194e14 100644 --- a/lib/livebook/notebook/cell/input.ex +++ b/lib/livebook/notebook/cell/input.ex @@ -20,7 +20,7 @@ defmodule Livebook.Notebook.Cell.Input do reactive: boolean() } - @type type :: :text | :url | :number | :password | :textarea + @type type :: :text | :url | :number | :password | :textarea | :range @doc """ Returns an empty cell. @@ -75,6 +75,13 @@ defmodule Livebook.Notebook.Cell.Input do end end + defp validate_value(value, :range) do + case Integer.parse(value) do + {_number, ""} -> :ok + _ -> {:error, "not a valid number"} + end + end + @doc """ Checks if the input changed in terms of content. """ diff --git a/lib/livebook_web/live/session_live/cell_component.ex b/lib/livebook_web/live/session_live/cell_component.ex index a8214a0c6..b52b277ff 100644 --- a/lib/livebook_web/live/session_live/cell_component.ex +++ b/lib/livebook_web/live/session_live/cell_component.ex @@ -459,5 +459,6 @@ defmodule LivebookWeb.SessionLive.CellComponent do defp html_input_type(:password), do: "password" defp html_input_type(:number), do: "number" defp html_input_type(:color), do: "color" + defp html_input_type(:range), do: "range" defp html_input_type(_), do: "text" end diff --git a/lib/livebook_web/live/session_live/input_cell_settings_component.ex b/lib/livebook_web/live/session_live/input_cell_settings_component.ex index d6327a904..31b91ee7e 100644 --- a/lib/livebook_web/live/session_live/input_cell_settings_component.ex +++ b/lib/livebook_web/live/session_live/input_cell_settings_component.ex @@ -77,7 +77,8 @@ defmodule LivebookWeb.SessionLive.InputCellSettingsComponent do password: "Password", text: "Text", textarea: "Textarea", - url: "URL" + url: "URL", + range: "Range" ] end end