Range component

<.range_field value="80" />

<.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>