Docs

Cinder UI

GitHub Hex
Original shadcn/ui docs ↗

Forms.slider

Server-rendered

Renders a slider using native range input(s).

Use min, max, and step for scalar values. For range sliders, render two controls and sync values in LiveView.

Basic slider 

  <.slider id="volume" name="volume" value={45} min={0} max={100} step={1} />

CPU limit slider 

  <.slider id="cpu_limit" name="cpu_limit" value={2} min={1} max={8} step={1} />

With FormField

Phoenix shim 
  <.slider field={@form[:volume]} />

With label

Phoenix shim 
  <.slider field={@form[:volume]} label="Volume" />

With explicit errors

Phoenix shim

is required

  <.slider field={@form[:volume]} label="Volume" errors={["is required"]} />

Inside field composition

Phoenix shim

Drag to adjust volume level.

  <.field>
  <:label for={@form[:volume].id}>Volume</:label>
  <.slider field={@form[:volume]} />
  <:description>Drag to adjust volume level.</:description>
</.field>

Attributes

Name Type Default Values Global Includes
class :string — — —
errors :list — — —
field {:struct, Phoenix.HTML.FormField} — — —
id :string — — —
label :string — — —
max :any 100 — —
min :any 0 — —
name :string — — —
rest :global — — —
step :any 1 — —
value :any — — —

Slots

No slots declared.