defmodule PyrauiWeb.DocsLive.SliderDocs do use PyrauiWeb, :html def render(assigns) do ~H"""

Slider

Slider component for selecting a numeric value within a range with visual feedback.

Basic Slider


              <.slider label="Volume" value={50} />
              <.slider label="Brightness" value={75} />
              <.slider label="Opacity" value={25} />

Custom Range


              <.slider label="Temperature (°C)" value={20} min={-10} max={40} />
              <.slider label="Price Range ($)" value={500} min={0} max={1000} step={50} />
              <.slider label="Rating" value={3} min={1} max={5} step={1} />

Without Value Display


              <.slider label="Volume" value={50} show_value={false} />
              <.slider label="Speed" value={60} show_value={false} />

With Validation


              <.slider label="Required Value" value={50} error="This field is required" />
              <.slider label="Value with Helper" value={30} helper="Adjust the slider to set your preferred value" />
              <.slider label="Disabled Slider" value={50} disabled={true} />

With Form Field

When used with a form field, the slider integrates with Phoenix forms: 


              <.form for={@form} phx-change="validate" phx-submit="save">
                <.slider label="Volume" field={@form[:volume]} />
                <.button type="submit">Save</.button>
              </.form>

Props

Prop Type Default Description
field Phoenix.HTML.FormField - Form field struct from to_form/2
label string nil Label text displayed above the slider
value integer 50 Current slider value
min integer 0 Minimum selectable value
max integer 100 Maximum selectable value
step integer 1 Step increment for slider value
error string nil Error message to display
helper string nil Helper text displayed below the slider
disabled boolean false Disable the slider
show_value boolean true Show current value next to the slider
""" end end