Shadix.Components.Slider (shadix v0.0.1)

Copy Markdown View Source

Slider component adapted from shadcn/ui (new-york-v4) to a native <input type="range">.

Field-aware: the current value is read from the bound Phoenix.HTML.FormField. shadcn builds its slider from Radix markup (track + range + thumb); here the same look is reconstructed on the native element with appearance-none plus Tailwind arbitrary variants targeting the browser's slider track/thumb pseudo-elements (::-webkit-slider-runnable-track, ::-webkit-slider-thumb, ::-moz-range-track, ::-moz-range-thumb). No JavaScript.

Summary

Functions

slider(assigns)

Functions

slider(assigns)

Attributes

  • field (Phoenix.HTML.FormField) (required)
  • min (:integer) - Defaults to 0.
  • max (:integer) - Defaults to 100.
  • step (:integer) - Defaults to 1.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "required", "readonly", "autofocus"].