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.

With FormField

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

With label

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

With explicit errors

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

Inside field composition

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

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

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 0 — —

Slots

No slots declared.