livebook-dev/livebook
1
1
Fork 0
mirror of https://github.com/livebook-dev/livebook.git synced 2025-09-04 03:54:24 +08:00
Code Issues Projects Releases Packages Wiki Activity

Added range input (Slider) (#435)

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

* Formatting correction
This commit is contained in:
Jean Carlos 2021-07-06 06:22:04 -03:00 • committed by GitHub
parent d90f3d6118
commit db22a7cccb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
assets/css/components.css
View file

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

9
lib/livebook/notebook/cell/input.ex
View file

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

1
lib/livebook_web/live/session_live/cell_component.ex
View file

@ -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

3
lib/livebook_web/live/session_live/input_cell_settings_component.ex
View file

@ -77,7 +77,8 @@ defmodule LivebookWeb.SessionLive.InputCellSettingsComponent do
password: "Password",
text: "Text",
textarea: "Textarea",
url: "URL"
url: "URL",
range: "Range"
]
end
end