Corex · Elixir Phoenix Framework UI Library

Semantic

Use class="ui-{role}" to set the semantic palette of an angle slider.

Available options: accent, alert, brand, info, success

Default

90deg

Accent

90deg

Brand

90deg

Alert

90deg

Info

90deg

Success

90deg

    <.angle_slider class="angle-slider" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Default</:label>
</.angle_slider>
<.angle_slider class="angle-slider ui-accent" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Accent</:label>
</.angle_slider>
<.angle_slider class="angle-slider ui-brand" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Brand</:label>
</.angle_slider>
<.angle_slider class="angle-slider ui-alert" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Alert</:label>
</.angle_slider>
<.angle_slider class="angle-slider ui-info" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Info</:label>
</.angle_slider>
<.angle_slider class="angle-slider ui-success" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Success</:label>
</.angle_slider>

Size

Use class="ui-size-{size}" to set the size of an angle slider.

Available options: xs, sm, md (default), lg, xl

SM

90deg

MD

90deg

LG

90deg

XL

90deg

    <.angle_slider class="angle-slider ui-size-sm" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>SM</:label>
</.angle_slider>
<.angle_slider class="angle-slider ui-size-md" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>MD</:label>
</.angle_slider>
<.angle_slider class="angle-slider ui-size-lg" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>LG</:label>
</.angle_slider>
<.angle_slider class="angle-slider ui-size-xl" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>XL</:label>
</.angle_slider>

States

Disabled

90deg

Read only

90deg

Invalid

90deg

    <.angle_slider class="angle-slider" value={90.0} disabled markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Disabled</:label>
</.angle_slider>
<.angle_slider class="angle-slider" value={90.0} read_only markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Read only</:label>
</.angle_slider>
<.angle_slider class="angle-slider" value={90.0} invalid markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Invalid</:label>
</.angle_slider>

Markers

90deg

No markers

90deg

    <.angle_slider class="angle-slider" value={90.0} markers marker_values={[0.0, 90.0, 180.0, 270.0]}>
  <:label>Markers</:label>
</.angle_slider>
<.angle_slider class="angle-slider" value={90.0}>
  <:label>No markers</:label>
</.angle_slider>