Certain props are shared across all form-related components, and you can find them in the form wrapper.
By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the gallery, allowing for flexible design changes.
Range component
<!--Default--> <.range_field value="10" color="natural" /> <.range_field value="20" color="danger" /> <.range_field value="30" color="warning" /> <.range_field value="40" color="success" /> <.range_field value="50" color="secondary" /> <.range_field value="60" color="primary" /> <.range_field value="70" color="info" /> <.range_field value="80" color="dawn" /> <.range_field value="90" color="misc" /> <.range_field value="100" color="dark" /> <!--Custome--> <.range_field appearance="custom" value="80" color="natural" /> <.range_field appearance="custom" value="80" color="danger" /> <.range_field appearance="custom" value="40" color="warning" /> <.range_field appearance="custom" color="success" /> <.range_field appearance="custom" color="secondary" /> <.range_field appearance="custom" color="primary" /> <.range_field appearance="custom" color="info" /> <.range_field appearance="custom" color="dawn" /> <.range_field appearance="custom" color="misc" /> <.range_field appearance="custom" color="dark" />
Range appearance prop
The
appearance
attribute controls the visual style of a range slider component, with a default value of
default
. If set to
custom
, the design of the range slider will change, allowing for a more personalized or unique look. This option provides flexibility in styling the slider to match the overall design of your application, offering a tailored appearance beyond the standard browser-provided styles.
<.range_field value="80" /> <.range_field appearance="custom" value="80" color="danger" step="10" />
Range step and min and max and value prop
The
step
,
min
,
max
, and
value
attributes in the
range_field
component control the range, precision, and default value of the slider. The
min
sets the lowest value, while the
max
defines the highest. The
step
determines the intervals between selectable values, allowing users to increment or decrement by the specified step size. The
value
attribute sets the initial or current value of the slider. These attributes work together to define the behavior, starting point, and precision of the slider, offering a highly customizable user experience for selecting values within a defined range.
<.range_field value="80" step="1" min="0" max="100" /> <.range_field appearance="custom" value="80" color="danger" step="10" min="0" max="100" />
Range component range value slot
The
range_value
slot in the
range_field
component allows you to display custom labels or values at specific positions along the range slider. With attributes like
class
for custom styling and
position
to define placement (such as "start", "middle", or "end"), you can visually enhance the slider by adding relevant labels, like minimum and maximum values. This makes the range slider more informative and user-friendly, helping users better understand the value range they are selecting from.
<.range_field appearance="custom" value="30" color="warning" size="small" min="100" id="mishka-chelekom" max="1500" name="mishka-chelekom" step="2" > <:range_value position="start">Min ($100)</:range_value> <:range_value position="middle">$700</:range_value> <:range_value position="end">Max ($1500)</:range_value> </.range_field>