<view onTap="">
  <!-- 横向 -->
  <view
      a:if="{{ direction === 'row' }}"
      class="slider-bar"
      style="width: {{ barWidth }}rpx;height: {{ grooveWidth > barRadius * 2 ? grooveWidth : barRadius * 2 }}rpx"
      onTouchMove="onTouchMove"
      onTouchStart="onTouchStart"
      onTouchEnd="onTouchEnd"
      onTap="onTap"
  >
    <view class="slider-bar-box"
          style="width: {{ barWidth }}rpx;height: {{ grooveWidth }}rpx;background-color: {{ inactiveUseLinear ? '' : inactiveColor }};background-image: {{ inactiveUseLinear ? inactiveColor : '' }};border-radius: {{ grooveRadius }}rpx;">
      <view class="active-slider-bar"
            style="height: 100%;width: {{ activeValue }}rpx;background-color: {{ activeUseLinear ? '' : activeColor }};background-image: {{ activeUseLinear ? activeColor : '' }};border-bottom-right-radius: {{ activeGrooveRadius }}rpx;border-top-right-radius: {{ activeGrooveRadius }}rpx"></view>
    </view>
    <view
        style="left: {{ buttonLeft }}rpx;top: {{ barRadius * 2 > grooveWidth ? 0 : (grooveWidth - barRadius * 2) / 2 }}rpx;"
        class="slider-node"
    >
      <view
          class="slider-node-item"
          a:if="{{ barType === 'circle' }}"
          style="width: {{ barRadius * 2 }}rpx;height: {{ barRadius * 2 }}rpx;border-radius: {{ barRadius }}rpx;background-color: {{ barColor }};border-color: {{ barBorderColor }}">
      </view>
      <view
          class="slider-node-item"
          a:if="{{ barType === 'block' }}"
          style="width: {{ barRadius * 2 }}rpx;height: {{ barRadius * 2 }}rpx;background-color: {{ barColor }};border-color: {{ barBorderColor }}">
      </view>
      <view
          class="slider-node-item"
          a:if="{{ barType === 'dount' }}"
          style="width: {{ barRadius * 2 }}rpx;height: {{ barRadius * 2 }}rpx;border-radius: {{ barRadius }}rpx;border-width: {{ barRadius * 2 > grooveWidth ? (barRadius * 2 - grooveWidth) / 2 : barRadius / 3 }}rpx;background-color: {{ activeColor }};border-color: {{ barColor }}">
      </view>
      <slot a:if="{{ barType === 'custom' }}"></slot>
    </view>
  </view>
  <!-- 纵向 -->
  <view
      a:if="{{ direction === 'column' }}"
      class="slider-bar"
      style="width: {{ grooveWidth > barRadius * 2 ? grooveWidth : barRadius * 2 }}rpx;height: {{ barWidth }}rpx"
      onTouchMove="touchMove"
      onTouchStart="touchStart"
      onTouchEnd="touchEnd"
      onTap="onClick"
  >
    <view class="slider-bar-box slider-bar-box-column"
          style="width: {{ grooveWidth }}rpx;height: {{ barWidth }}rpx;background-color: {{ inactiveUseLinear ? '' : inactiveColor }};background-image: {{ inactiveUseLinear ? inactiveColor : '' }};border-radius: {{ grooveRadius }}rpx;">
      <view class="active-slider-bar"
            style="width: 100%;height: {{ activeValue }}rpx;background-color: {{ activeUseLinear ? '' : activeColor }};background-image: {{ activeUseLinear ? activeColor : '' }};border-top-left-radius: {{ activeGrooveRadius }}rpx;border-top-right-radius: {{ activeGrooveRadius }}rpx"></view>
    </view>
    <view
        style="bottom: {{ buttonLeft }}rpx;left: {{ barRadius * 2 > grooveWidth ? 0 : (grooveWidth - barRadius * 2) / 2 }}rpx;"
        class="slider-node"
    >
      <view
          class="slider-node-item"
          a:if="{{ barType === 'circle' }}"
          style="width: {{ barRadius * 2 }}rpx;height: {{ barRadius * 2 }}rpx;border-radius: {{ barRadius }}rpx;background-color: {{ barColor }};border-color: {{ barBorderColor }}">
      </view>
      <view
          class="slider-node-item"
          a:if="{{ barType === 'block' }}"
          style="width: {{ barRadius * 2 }}rpx;height: {{ barRadius * 2 }}rpx;background-color: {{ barColor }};border-color: {{ barBorderColor }}">
      </view>
      <view
          class="slider-node-item"
          a:if="{{ barType === 'dount' }}"
          style="width: {{ barRadius * 2 }}rpx;height: {{ barRadius * 2 }}rpx;border-radius: {{ barRadius }}rpx;border-width: {{ barRadius * 2 > grooveWidth ? (barRadius * 2 - grooveWidth) / 2 : barRadius / 3 }}rpx;background-color: {{ activeColor }};border-color: {{ barColor }}">
      </view>
      <slot a:if="{{ barType === 'custom' }}"></slot>
    </view>
  </view>
</view>
