{
"files": [
{
"content": "defmodule Shadix.Components.Slider do\n @moduledoc \"\"\"\n Slider component adapted from shadcn/ui (new-york-v4) to a native\n `<input type=\"range\">`.\n\n Field-aware: the current value is read from the bound `Phoenix.HTML.FormField`.\n shadcn builds its slider from Radix markup (track + range + thumb); here the\n same look is reconstructed on the native element with `appearance-none` plus\n Tailwind arbitrary variants targeting the browser's slider track/thumb\n pseudo-elements (`::-webkit-slider-runnable-track`, `::-webkit-slider-thumb`,\n `::-moz-range-track`, `::-moz-range-thumb`). No JavaScript.\n \"\"\"\n use Phoenix.Component\n\n import Shadix.Cn\n import Shadix.Form\n\n @base \"w-full cursor-pointer appearance-none bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 focus-visible:outline-none \" <>\n \"[&::-webkit-slider-runnable-track]:h-1.5 [&::-webkit-slider-runnable-track]:w-full [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-muted \" <>\n \"[&::-moz-range-track]:h-1.5 [&::-moz-range-track]:w-full [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-muted \" <>\n \"[&::-webkit-slider-thumb]:-mt-[5px] [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-background [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:ring-ring/50 [&::-webkit-slider-thumb]:transition-[box-shadow] hover:[&::-webkit-slider-thumb]:ring-4 focus-visible:[&::-webkit-slider-thumb]:ring-4 \" <>\n \"[&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-background [&::-moz-range-thumb]:shadow-sm [&::-moz-range-thumb]:ring-ring/50 [&::-moz-range-thumb]:transition-[box-shadow] hover:[&::-moz-range-thumb]:ring-4 focus-visible:[&::-moz-range-thumb]:ring-4 \" <>\n \"aria-invalid:[&::-webkit-slider-thumb]:border-destructive aria-invalid:[&::-moz-range-thumb]:border-destructive\"\n\n attr(:field, Phoenix.HTML.FormField, required: true)\n attr(:min, :integer, default: 0)\n attr(:max, :integer, default: 100)\n attr(:step, :integer, default: 1)\n attr(:class, :string, default: nil)\n\n attr(:rest, :global, include: ~w(disabled required readonly autofocus))\n\n def slider(assigns) do\n %{id: id, name: name, value: value, errors: errors} = field_attrs(assigns.field)\n assigns = assign(assigns, id: id, name: name, value: value, errors: errors)\n assigns = assign(assigns, :computed_class, cn([@base, assigns.class]))\n\n ~H\"\"\"\n <input\n type=\"range\"\n data-slot=\"slider\"\n id={@id}\n name={@name}\n value={@value}\n min={@min}\n max={@max}\n step={@step}\n aria-invalid={@errors != [] && \"true\"}\n aria-describedby={(@errors != [] && \"#{@id}-error\") || nil}\n class={@computed_class}\n {@rest}\n />\n <p\n :if={@errors != []}\n id={\"#{@id}-error\"}\n data-slot=\"form-message\"\n class=\"text-destructive text-sm mt-1\"\n >\n {List.first(@errors)}\n </p>\n \"\"\"\n end\nend\n",
"path": "slider.ex"
}
],
"hooks": [],
"name": "slider",
"npm_deps": [],
"registry_deps": [
"cn",
"form"
]
}