<sly-timeline
    :frames-count="data.{{{widget.widget_id}}}.framesCount"
    :intervals="data.{{{widget.widget_id}}}.intervals"
    :colors="data.{{{widget.widget_id}}}.colors"
    :options="data.{{{widget.widget_id}}}.options"
    :pointer="state.{{{widget.widget_id}}}.pointer"
    {% if widget._click_handled %}
    @update:pointer="(val) => {
        state.{{{widget.widget_id}}}.pointer = val; 
        post('/{{{widget.widget_id}}}/click');
    }"
    {% else %}
    @update:pointer="val => state.{{{widget.widget_id}}}.pointer = val"
    {% endif %}
    {% if widget._segment_selected_handled %}
    @segment-selected="(val) => {
        state.{{{widget.widget_id}}}.selectedSegment = val;
        post('/{{{widget.widget_id}}}/segment_selected_cb');
    }"
    {% else %}
    @segment-selected="val => state.{{{widget.widget_id}}}.selectedSegment = val"
    {% endif %}

>   
    {% if widget._tooltip_content %}
    <template slot-scope="{ activeInterval }">
      <span v-if="activeInterval">
        {{{widget._tooltip_content}}}
      </span>
    </template>
    {% endif %}
</sly-timeline>