Anatomy

    <.slider class="slider">
  <:label>Volume</:label>
</.slider>

  

    <.slider class="slider" value={[20, 80]}>
  <:label>Price</:label>
</.slider>

  

    <.slider class="slider" markers marker_values={[0, 25, 50, 75, 100]}>
  <:label>Volume</:label>
</.slider>

  

    <.slider class="slider" value={50.0} markers marker_values={[0.0, 25.0, 50.0, 75.0, 100.0]} compound :let={ctx}>
  <.slider_root ctx={ctx}>
    <.slider_label ctx={ctx}>Volume</.slider_label>
    <.slider_control ctx={ctx}>
      <.slider_track ctx={ctx}>
        <.slider_range ctx={ctx} />
      </.slider_track>
      <.slider_thumb ctx={ctx} index={0}>
        <.slider_hidden_input ctx={ctx} index={0} />
      </.slider_thumb>
    </.slider_control>
    <.slider_marker_group ctx={ctx}>
      <.slider_marker :for={v <- ctx.marker_values} ctx={ctx} value={v} />
    </.slider_marker_group>
    <.slider_value_text ctx={ctx} />
  </.slider_root>
</.slider>