Angle Slider Anatomy
Explore the default structure, slot customization, and compound mode for the angle slider.
Hex doc
Phoenix
Minimal
<.angle_slider class="angle-slider">
<:label>Angle</:label>
</.angle_slider>
With label
<.angle_slider class="angle-slider" marker_values={[0, 90, 180, 270]}>
<:label>Angle</:label>
</.angle_slider>
Custom slot
<.angle_slider class="angle-slider" value={90.0} marker_values={[0.0, 90.0, 180.0, 270.0]}>
<:label>Angle</:label>
<:value_text :let={vt}>
Rotation: <span class="font-bold" {vt.value_attrs} />
<span {vt.text_attrs}>°</span>
</:value_text>
</.angle_slider>
Compound
<.angle_slider class="angle-slider" value={90.0} marker_values={[0.0, 90.0, 180.0, 270.0]} compound :let={ctx}>
<.angle_slider_root ctx={ctx}>
<.angle_slider_label ctx={ctx}>Angle</.angle_slider_label>
<.angle_slider_control ctx={ctx}>
<.angle_slider_thumb ctx={ctx} />
<.angle_slider_marker_group ctx={ctx}>
<.angle_slider_marker :for={v <- ctx.marker_values} ctx={ctx} value={v} />
</.angle_slider_marker_group>
</.angle_slider_control>
<.angle_slider_value_text ctx={ctx} />
<.angle_slider_hidden_input ctx={ctx} name="angle" />
</.angle_slider_root>
</.angle_slider>