How to use the lit-html/directives/live.live function in lit-html

/* min= */ 0,
          /* max= */ 255,
          /* step= */ 1)}

        ${numericParamTemplate(
          'max-rgba-delta',
          'Max RGBA delta:',
          /* setterFn= */ (val) => el._filters!.maxRGBADelta = val,
          /* value= */ el._filters?.maxRGBADelta,
          /* min= */ 0,
          /* max= */ 255,
          /* step= */ 1)}

        <label for="sort-order">Sort order:</label>
        <select id="sort-order">
          <option value="ascending">Ascending</option>
          <option value="descending">Descending</option>
        </select>

        
        
      

      <div class="buttons">
        <button class="filter action">Apply</button>
        <button class="cancel">Cancel</button>
      </div>

private static _template = (el: FilterDialogSk) => html`
    <dialog class="filter-dialog">
      <div class="content">
        <span class="label">Right-hand traces:</span>
        
        

        ${numericParamTemplate(
          'min-rgba-delta',
          'Min RGBA delta:',
          /* setterFn= */ (val) =&gt; el._filters!.minRGBADelta = val,
          /* value= */ el._filters?.minRGBADelta,
          /* min= */ 0,
          /* max= */ 255,
          /* step= */ 1)}

        ${numericParamTemplate(
          'max-rgba-delta',
          'Max RGBA delta:',
          /* setterFn= */ (val) =&gt; el._filters!.maxRGBADelta = val,</div></dialog>

/* value= */ el._filters?.maxRGBADelta,
          /* min= */ 0,
          /* max= */ 255,
          /* step= */ 1)}

        <label for="sort-order">Sort order:</label>
        <select id="sort-order">
          <option value="ascending">Ascending</option>
          <option value="descending">Descending</option>
        </select>

        
        
      

      <div class="buttons">
        <button class="filter action">Apply</button>
        <button class="cancel">Cancel</button>
      </div>
    `;

private static _template = (el: SearchControlsSk) => html`
    
    

    <div class="digests">
      <span class="legend">Digests:</span>

      ${SearchControlsSk._checkBoxTemplate(
          el,
          /* label= */ 'Positive',
          /* cssClass= */ 'include-positive-digests',
          /* fieldName= */ 'includePositiveDigests')}

      ${SearchControlsSk._checkBoxTemplate(
          el,
          /* label= */ 'Negative',
          /* cssClass= */ 'include-negative-digests',</div>

};

  // Please see the note on the FilterDialogSk's template regarding the live() directive.
  return html`
    <label for="${id}">${label}</label>
    <div id="${id}-numeric-param" class="numeric-param">
      <input step="${step}" max="${max}" min="${min}" id="${id}" type="range">
      <input step="${step}" max="${max}" min="${min}" type="number">
    </div>`;
}

(el: SearchControlsSk,
       label: string,
       cssClass: string,
       fieldName: keyof SearchCriteria) => {
    const onChange = (e: Event) => {
      (el._searchCriteria[fieldName] as boolean) = (e.target as HTMLInputElement).checked;
      el._emitChangeEvent();
    };
    return html`
      
      `;
  };