<import-sjs
  from="./index.sjs"
  name="sliderSjs"
></import-sjs>
<template name="slider-handler">
  <view
    class="ant-slider-handler"
    style="left: {{position}}%"
  >
    <popover
      placement="top"
      visible="{{showTooltip}}"
      showMask="{{false}}"
    >
      <slot name="slider">
        <view class="ant-slider-handler-block">
          <view class="ant-slider-handler-icon-default">
            <view class="ant-slider-handler-icon-default-line1"></view>
            <view class="ant-slider-handler-icon-default-line2"></view>
            <view class="ant-slider-handler-icon-default-line3"></view>
          </view>
        </view>
      </slot>
      <view
        slot="content"
        class="ant-slider-tooltip-content"
      >
        <slot
          name="tooltip"
          value="{{value}}"
        >
          {{value}}
        </slot>
      </view>
    </popover>
  </view>
</template>
<view
  class="ant-slider {{className ? className : ''}}"
  style="opacity: {{disabled ? '0.4' : '1'}};"
>
  <view class="ant-slider-track {{showNumber ? 'ant-slider-track-number' : ''}}">
    <view
      class="ant-slider-track-touch-area"
      id="ant-slider-id-{{$id || ''}}"
      onTouchStart="handleTrackTouchStart"
      onTouchEnd="handleTrackTouchEnd"
      onTouchMove="handleTrackTouchMove"
    >
      <view class="ant-slider-track-fill">
        <view class="ant-slider-track-fill-background"></view>
        <view
          class="ant-slider-track-fill-front {{activeLineClassName || ''}}"
          style="width: {{sliderWidth}}%; left: {{sliderLeft}}%; {{activeLineStyle || ''}}"
        ></view>
        <view class="ant-slider-showTicks">
          <block
            a:for="{{tickList}}"
            a:for-index="index"
            a:for-item="item"
          >
            <view
              class="ant-slider-tick ant-slider-tick-{{sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) ? 'front' : 'back'}} {{sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotClassName ? activeDotClassName : ''}}"
              style="left: {{item.left}}%;{{sliderSjs.isFrontTick(item, sliderLeft, sliderWidth) && activeDotStyle ? activeDotStyle : ''}}"
            >
              <view
                a:if="{{showNumber}}"
                class="ant-slider-tick-number"
              >
                <slot
                  name="tick"
                  value="{{item.value}}"
                >
                  {{item.value}}
                </slot>
              </view>
            </view>
          </block>
        </view>
        <block a:if="{{range}}">
          <template
            is="slider-handler"
            data="{{ position: sliderLeft, icon: icon, value: mixin.value[0], showTooltip: changingStart && showTooltip }}"
          ></template>
        </block>
        <template
          is="slider-handler"
          data="{{ position: sliderLeft + sliderWidth, icon: icon, value: range ? mixin.value[1] : mixin.value, showTooltip: changingEnd && showTooltip }}"
        ></template>
      </view>
    </view>
  </view>
  <view></view>
</view>