// #region Imports
import { html } from '../../../../Dom/Html';
import { when } from '../../../Directives/Directives';
// #endregion
/**
 * The template of the {@link Slider2Element}.
 *
 * @public
 */
export function slider2ElementTemplate(e) {
    return html `
        <div part="root">
            ${when(e.showValueIndicator, () => html `
            <span part="labelStart">${e.min.toFixed()}</span>
            `)}

            <div part="container"
                 class="relative w-full">
                <span part="trackArea"></span>
                <span part="progressArea"></span>

                <slot name="thumb">
                    <mosaik-slider2-thumb part="thumb"
                                          .min="${e.min}"
                                          .max="${e.max}"
                                          .value="${e.value}"></mosaik-slider2-thumb>
                </slot>
            </div>

            ${when(e.showValueIndicator, () => html `
            <span part="labelEnd">${e.max.toFixed()}</span>
            `)}
      </div>
    `;
}
//# sourceMappingURL=Slider2ElementTemplate.js.map