Range field
v0.0.10
mix mishka.ui.gen.component range_field
Range component
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 appearance prop
<.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 step and min and max and value prop
<.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 component range value slot
<.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>Range component range value slot
Attributes
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
id
|
string
| — | — | No | A unique identifier is used to manage state and interaction |
class
|
any
| — | — | No | Custom CSS class for additional styling |
label_class
|
string
| — | — | No | Custom CSS class for the label styling |
color
|
string
|
primary
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
border
|
string
|
extra_small
| — | No | Determines border style |
size
|
string
|
extra_small
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
appearance
|
string
|
default
| — | No | custom, default |
width
|
string
|
full
| — | No | Determines the element width |
ring
|
boolean
|
true
| — | No | Determines a ring border on focused input, utilities for creating outline rings with box-shadows. |
reverse
|
boolean
|
false
| — | No | Switches the order of the element and label |
checked
|
boolean
|
false
| — | No | Specifies if the element is checked by default |
error_icon
|
string
| — | — | No | Icon to be displayed alongside error messages |
label
|
string
| — | — | No | Specifies text for the label |
errors
|
list
|
[]
| — | No | List of error messages to be displayed |
name
|
any
| — | — | No | Name of input |
value
|
any
| — | — | No | Value of input |
field
|
Phoenix.HTML.FormField
| — | — | No | a form field struct retrieved from the form |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
range_value
| No | — |
Attributes of the range_value slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
class
|
any
| — | — | No | Custom CSS class for additional styling |
position
|
any
| — | — | No | Determines the element position, `start` when not given |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--color
|
basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component range_field