import{html as a}from"lit";import{classMap as e}from"lit/directives/class-map.js";const i=e=>a`
    <div>
      <nile-tooltip
        content=${e.rangeOneValue}
        placement=${e.tooltipPosition}
      >
        <div 
          id="range-one" 
          class="range-button"
          part="range-button"
          role="slider"
          tabindex="0"
          aria-valuemin=${e.minValue}
          aria-valuemax=${e.maxValue}
          aria-valuenow=${e.rangeOneValue}
          aria-label="Minimum value"
        ></div>
      </nile-tooltip>
      <nile-tooltip
        content=${e.rangeTwoValue}
        placement=${e.tooltipPosition}
      >
        <div
          id="range-two"
          class="range-button-two"
          part="range-button-two"
          role="slider"
          tabindex="0"
          aria-valuemin=${e.minValue}
          aria-valuemax=${e.maxValue}
          aria-valuenow=${e.rangeTwoValue}
          aria-label="Maximum value"
        ></div>
      </nile-tooltip>
    </div>
  `,t=i=>a`
    <div>
      <nile-tooltip
        content=${i.value}
        placement=${i.tooltipPosition}
      >
        <div 
          class=${e({"range-button":!0,"range-button-active":"one"===i.activeThumb})} 
          part="range-button"
          role="slider"
          tabindex="0"
          aria-valuemin=${i.minValue}
          aria-valuemax=${i.maxValue}
          aria-valuenow=${i.value}
          aria-label=${i.ariaLabel||"Slider value"}
        ></div>
      </nile-tooltip>
    </div>
  `,l=e=>a`
    <div part="label-container" class="label-container">
      <span id="label-start">${e.labelStart}</span>
      <span id="label-end">${e.labelEnd}</span>
    </div>
  `;export{l,i as r,t as s};
