Added range input (Slider) (#435)

* Added range input (Slider)
* Added range input (Slider)
* Custom css to range input

* Formatting correction

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;
   }

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.
   """

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

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